HTML5 拖放Drag 和 drop用法以及事件介绍

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

1
<img draggable="true">

拖拽事件

名称 作用
dragstart 在拖动时触发
dragend 在拖动完成时触发
dragenter 目标元素上绑定dragenter事件,当拖拽元素进入目标元素时触发
dragover 目标元素上绑定dragover事件, 当拖拽元素在目标元素上移动时触发
drop 目标元素上绑定drop事件, 并同时取消当前目标元素的dragover的默认事件, 当拖拽元素在目标元素上同时鼠标放开时触发事件.
例: box为目标元素.
box.addEventListener('dragover', function(e){console.log('dragover'); e.preventDefault();});
box.addEventListener('drop', function(e){console.log('drop');});
dropdragend同时绑定时drop事件先触发



有时可能为了获取当前拖拽元素的信息, 可以使用DragEvent事件对象, 该对象有两个比较重要的属性:

1
2
3
4
e.dataTransfer.setData("data",e.target.id);
//target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
e.dataTransfer.getData("data")
//使用这两个属性就可以获取分辨出当前的拖拽元素的信息.

使用拖拽上传文件

1
2
3
4
5
6
7
8
9
10
11
ele.addEventListener('dragover', function (e) {
e.preventDefault();
}, false);
ele.addEventListener('drop', function (e) {
//调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
e.preventDefault();
console.log(e)
var dt = e.dataTransfer;
var files = dt.files;
console.log(files);
}, false)
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!