dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。 darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。 dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。 dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。 dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。 drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。 dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
其中事件主体是拖放元素的是，dragstart（开始拖动） 、darg（正在拖放） 、dragend（拖放结束），其他4个事件主体都是目标元素，进入、移动、离开、完全进入四个状态。
效果：
只有简单的拖放而没有数据变化是没有什么用的。为了在拖放操作时实现数据交换HTML5定义了dataTransfer对象来传递拖拽的数据。
因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来 完善拖放功能。
getData()和setData() dataTransfer对象有 getData()和setData()两个主要方法，操作dataTransfer中携带的数据。不难想象，getData()可以取得由setData()保存的值。setData()方法的第一个参数，也是getDAta()方法唯一的一个参数，表示保存的数据类型。
IE只定义了“text”和“URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持“text”和“URL”，但这两种类型会被映射为“text/plain”和“text/uri-list”。如下所示：
text/html：文本文字格式 text/plain：HTML代码格式 text/xml：XML字符格式 text/url-list：URL格式列表
dropEffect属性值为字符串，表示被拖动元素可以执行哪一种放置行为要使用这个属性，必须在dragenter事件处理函数中设置
none 不能把元素拖放至此（除文本框外全部元素的默认值） move 移动到目标 copy 复制到目标 link 目标打开拖动元素（拖动元素必须是链接并有URL）
effectAllowed属性值也是字符串，表示允许拖动元素哪种dropEffect要使用这个属性，必须在dragst事件处理函数中设置
uninitialized 没有设置任何拖放行为 none 不能由任何行为 copy 仅允许dropEffect值为copy link 仅允许dropEffect值为link move 仅允许dropEffect值为move copyLink 允许dropEffect值为copy和link copyMove 允许dropEffect值为copy和move linkMove 允许dropEffect值为link和move all 允许任意dropEffect
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。
onmousedown：鼠标按下事件 onmousemove：鼠标移动事件 onmouseup：鼠标抬起事件
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
基本思路如下：
拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1，那么 元素y = 现在鼠标y - 原来鼠标y + 原来元素y 元素x = 现在鼠标x - 原来鼠标x + 原来元素x } 鼠标在任何时候放开的时候{ 拖拽状态 = 0 }
参考文章： https://blog.csdn.net/gongzhuxiaoxin/article/details/52894784 https://www.cnblogs.com/wuya16/p/DragApi.html
