html5 拖放
一、为了使元素可拖动，把 draggable 属性设置为 true
<div draggable="true"></div>二、添加事件监听
HTML5拖放有如下事件
drag事件：拖拉过程中，在被拖拉的节点上持续触发。
dragstart事件：拖拉开始时在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend事件：拖拉结束时（释放鼠标键或按下escape键）在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。它与dragStart事件，在同一个节点上触发。不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
dragenter事件：拖拉进入当前节点时，在当前节点上触发，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover事件：拖拉到当前节点上方时，在当前节点上持续触发，该事件的target属性是当前节点。该事件与dragenter事件基本类似，默认会重置当前的拖拉事件的效果（DataTransfer对象的dropEffect属性）为none，即不允许放下被拖拉的节点，所以如果允许在当前节点drop数据，通常会使用preventDefault方法，取消重置拖拉效果为none。
dragleave事件：拖拉离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。在视觉上显示拖拉离开当前节点，就在这个事件的监听函数中设置。
drop事件：被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发。注意，如果当前节点不允许drop，即使在该节点上方松开鼠标键，也不会触发该事件。如果用户按下Escape键，取消这个操作，也不会触发该事件。该事件的监听函数负责取出拖拉数据，并进行相关处理。
点击这个链接查看HTML5各个拖放事件
总结
当一个节点被拖拉到另一个节点里，触发的事件如下:
dragstart --> drag --> dragenter --> dragover --> drop --> dragend
- dragstart， drag， dragend 在被拖动的节点触发，触发的event.target为被拖拽的节点
- dragenter dragover dragleave drop 在目标节点触发，触发的event.target为释放的目标节点
- 在 dragover触发时需要执行event.preventDefault()，允许被拖动的节点进入。
在firefox浏览器上需要注意的东西
1、在firefox上 drag、dragend 事件不能够获取鼠标位置
2、需要在dragstart 触发时保存数据，不然不能拖动。
3、dataTransfer.setData()函数中 key 为‘Text’ 时会打开一个新的标签页
let drag = document.getElementById(‘drag‘);
drag.addEventListener(‘dragstart‘, (event) => {
console.log(‘dragstart‘)
// 兼容 firefox ， setData()函数中 key 为‘Text’ 时会打开一个新的标签页
// event.dataTransfer.setData("Text",‘www.baidu.com‘);
event.dataTransfer.setData("any",‘www.baidu.com‘);
})学习了各个事件后做了一个可以拖动的Div的demo，点击查看