参考文档

拖拽流程

1. 让元素可拖拽

设置draggable属性告诉浏览器哪些元素可以拖动

值 说明
true 可以拖动
false 不可以拖动
auto 浏览器决定该元素是否可拖动（默认值） 
<div draggable="true">

2. 处理拖动事件

事件名 说明
dragstart 在元素开始被拖动时触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发

可以利用这些事件添加一些视觉效果强化拖拽操作

在 dragstart中  为元素添加一个拖拽样式
在 dragend中   取消拖拽样式

3 .释放拖拽元素

拖拽元素要拖到释放区里才能释放。

要让某个元素称为释放区，我们需要处理dragenter和dragover事件。

释放区事件如下：

事件名 说明
dragenter 当被拖放元素进入释放区时触发
dragover 当被拖放元素在释放区内移动时触发
dragleave 当被拖放元素没有放下就离开释放区时触发
drop 当被拖放元素在释放区里放下时触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖拽的元素，所以我们要阻止默认行为。

onDragEnter(e){
	e.preventDefault()
}
onDragOver(e){
  e.preventDefault()
}