拖放事件
dom被拖拽--->经过一些dom--->到达指定dom
-
被拖拽的dom：（源对象）
dragstart 源对象被拖拽
drag 源对象拖拽过程中
dragend 源对象拖拽结束（drop事件后执行）
-
拖拽过程中经过的dom：（过程对象）
dragenter 源对象进入过程对象
dragover 源对象在过程对象中移动 (设置event.preventDefault(),否则drop事件不会执行)
drageleave 源对象离开过程对象
-
拖拽到达指定的dom：（目标对象）
drop 拖放到指定目标对象内
-
dataTransfer对象：（拖拽过程中数据传递对象）
setData()存入数据
支持格式：text/plain、text/html、text/xml、text/url-listgetData()
clearData()
实现
实现目录可在同级、子级拖动
思路：
- 在dragstart时向dataTransfer对象存入源对象的数据
- 在dragenter时给过程对象加同级拖拽标识
-
在dragenter时同时记录下进入时鼠标的坐标（x1, y1）
-
当dragover时依然记录下鼠标的坐标（x2, y2）
-
设定规则加子级拖拽标识，例如:Math.abs(x2-x1) > 50
- 当dragleave时，去掉所有标识
- 当drop时，获取dataTransfer对象的数据，并更新拖拽数据
- 当dragend时，去掉所有标识
效果
- 拖拽到子级
2.拖拽到同级
此例子是结合vue递归组件实现：vue-drag
更多专业前端知识，请上 【猿2048】www.mk2048.com
