HTML5 进阶（2）——拖拽上传

最新推荐文章于 2023-05-15 16:44:01 发布

poorpenguin

最新推荐文章于 2023-05-15 16:44:01 发布

阅读量343

点赞数

分类专栏：前端 HTML5

本文链接：https://blog.csdn.net/weixin_39141044/article/details/82942718

版权

本文介绍了HTML5中拖拽功能的实现，包括传统拖拽的改进和HTML5拖拽上传的详细步骤，涉及dragstart、dragover、drop等事件及dataTransfer对象的使用。并提供了前端和后端的简单实现代码，以及推荐了实用的拖拽插件jquery.pep.js和dragdealer.js。

摘要由CSDN通过智能技术生成

拖拽的应用在平时的开发中很常见，如拖拽生成调查问卷，通过拖拽就能生成模板网站的系统，拖拽上传，OA系统中拖拽生成上报的流程图。

一、传统拖拽

1. 基本写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>传统拖拽</title>
	<style>
		.dialog{
     
			position: absolute;
			top: 50px;
			left: 100px;
			width: 200px;
		}
		.dialog .title{
     
			background-color: #D7dEF0;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			cursor: move;
		}
		.dialog .content{
     
			background-color: #f0f0f0;
			height: 200px;
		}
	</style>
</head>
<body>
	<div class="dialog" id="dialog">
		<div class="title">title</div>
		<div class="content"></div>
	</div>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
	<script>
		var dialog = $('#dialog');
		var titleEle = $('#dialog .title');	
		var lastPoint = {
     };
		var isMouseDown = false;

		titleEle.mousedown(function(e){
     
			isMouseDown = true;
			lastPoint.x = e.pageX;
			lastPoint.y = e.pageY;
		}).mousemove(function(e){
     
			if(isMouseDown){
     
				
				var currentLocationX = dialog.offset().left + (e.pageX - lastPoint.x);
				var currentLocationY = dialog.offset().top + (e.pageY - lastPoint.y);
				dialog.offset({
     top: currentLocationY,left: currentLocationX});
			
				lastPoint.x = e.pageX;
				lastPoint.y = e.pageY;
			}
		}).mouseup(function(e){
     
			isMouseDown = false;
			lastPoint = {
     };
		}).mouseout(function(){
     
			isMouseDown = false;
			lastPoint = {
     };
		});
	</script>
</body>
</html>

2. 传统拖拽的改进

以上的基本写法有一个问题，当鼠标移动太快的时候，拖拽的元素会跟不上鼠标，鼠标脱离拖拽区域。
对此做出一点改进：

使用事件委托，将鼠标事件绑定在document文档上
对于鼠标移动事件不判断是否是指定子元素触发的。

	<script>
		var dialog = $('#dialog');
		var titleEle = $('#dialog .title');	
		var lastPoint = {
    };
		var isMouseDown = false;

		//使用事件委托
		$(document).on('mousedown','div.title',function(e){
     //
			isMouseDown = true;
			lastPoint.x = e.pageX;
			lastPoint.y = e.pageY;
		}).on('mousemove',function(e){
     //这里可以是使元素跟上鼠标的速度，而不至于脱离
			if(isMouseDown){
    

				var currentLocationX = dialog.offset().left + (e.pageX - lastPoint.x);
				var currentLocationY = dialog.offset().top + (e.pageY - lastPoint.y);
				dialog.offset({
    top: currentLocationY,left: currentLocationX});
			
				lastPoint.x = e.pageX;
				lastPoint.y = e.pageY;
			}
		}).on('mouseup',function(){
    
			isMouseDown = false;
			lastPoint = {
    };
		});

	</script>

大概就是这么个意思。

3.jquery事件对象中定位相关的属性

	$(document).on('mousedown','div.title',function(e){
     
			isMouseDown = true;
			lastPoint.x = e.pageX;
			lastPoint.y = e.pageY;
		}).

绑定的事件中的参数e就是事件对象。

clientX Y：参照页面左上角，不算滚动的距离
pageX Y：参照页面左上角，从滚动条滚到最上面的的点加上滚动的距离然后再到点击的这个点距离
offsetX Y：参照父元素左上角
screenX Y：参照屏幕（显示器）的左上角

二、HTML5实现拖拽和拖拽上传

HTML5实现拖拽的三点：

HTML5标签添加draggable=true
HTML5标签添加拖拽事件（dragstart、dragover、drop）
通过事件对象下的event.dataTransfer对象（setData、getData、files）
jquery下的dataTransfer需要通过event.originalEvent.dataTransfer使用
event.originalEvent.dataTransfer.files或者event.dataTransfer.files可以获取鼠标拖拽系统文件的信息

1.简单的拖拽实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5鼠标拖拽</title>
	<style>
		.container{
     
			width: 200px

最低0.47元/天解锁文章

poorpenguin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录