拖放流程
用户能够将一个可拖动元素移动到另一个可放置元素中，释放鼠标来应用这些改变。
拖放总的来说有三步: 鼠标按下、移动和释放
- 拖放元素，设置属性
draggable="true"使其可拖动 - 拖拽移动过程
- 拖拽释放区域
拖放事件
拖放过程中会触发多个事件，这些事件会作用于两种对象元素上，一种是被拖动的元素，另外一种是放置目标元素。
拖动期间像mousemove等事件均不会被触发。如果由本地向浏览器拖放文件，dragstart和dragend也不会被触发。
| 事件 | 对象 | 作用 |
|---|---|---|
| dragstart | src | 元素开始被拖动的时候触发 |
| dragenter | target | 拖动元素鼠标进入到目标区域时触发 |
| dragover | target | 拖动元素在目标区域移动时触发 |
| dragleave | target | 拖动元素鼠标离开目标区域时触发 |
| drag | src | 拖放过程中在被拖动元素上连续触发 |
| drop | target | 释放时触发，目标元素 |
| dragend | src | 释放时触发，被拖动元素 |
在默认的情况下，浏览器会阻止所有的拖放操作，所以在进入到目标区域时需要阻止浏览器的默认行为。也就是在dragenter和dragover的事件中取消浏览器默认行为，使元素可以被拖放。
拖放数据
拖放事件初始化后会生成一个dataTransfer对象，其中保存了所有拖放数据。
通过浏览器控制台打印这个对象，可以看到有如下属性和方法：
其中
effectAllowed:限定可操作类型，取值[copy,move,link,copyLink,copyMove,limkMove,all, none,uninitialized]dropEffect: 设置光标类型，取值是effectAllowed中设置的，但是只有[copy,move,link,none]可被设定files:读取可用的本地文件列表items:保存了DataTransferItemList对象types:保存DataTransfer设置的数据类型
方法
setData(format, data):在dataTransfer中设置数据，常见类型Drag TypesgetData(format): 获取设置的对应格式数据clearData(format): 清除指定格式数据setDragImage(image, xOffset, yOffset):设置拖动反馈图片
举个栗子
知道了上面的概念之后，就可以进行实际的操作了。
参考资料
https://developer.mozilla.org/zh-CN/docs/DragDrop/Drag_and_Drop