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

设置元素为可拖放

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