HTML5 拖放Drag 和 drop用法以及事件介绍
2017-11-08 本文已影响39人
刘翾
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<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');});drop与dragend同时绑定时drop事件先触发 |
有时可能为了获取当前拖拽元素的信息, 可以使用DragEvent事件对象, 该对象有两个比较重要的属性:
e.dataTransfer.setData("data",e.target.id);
//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
e.dataTransfer.getData("data")
//使用这两个属性就可以获取分辨出当前的拖拽元素的信息.
使用拖拽上传文件
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)
