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

设置元素为可拖放

首先，为了使元素可拖动，把 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)