Vue结合HTML5拖放API 实现目录拖拽～

拖放事件

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-list
  复制代码

  getData()

  clearData()

实现

实现目录可在同级、子级拖动

思路：

1. 在dragstart时向dataTransfer对象存入源对象的数据
2. 在dragenter时给过程对象加同级拖拽标识

3. 在dragenter时同时记录下进入时鼠标的坐标（x1, y1）

4. 当dragover时依然记录下鼠标的坐标（x2, y2）

5. 设定规则加子级拖拽标识，例如:Math.abs(x2-x1) > 50

6. 当dragleave时，去掉所有标识
7. 当drop时，获取dataTransfer对象的数据，并更新拖拽数据
8. 当dragend时，去掉所有标识

效果

1. 拖拽到子级

2.拖拽到同级

此例子是结合vue递归组件实现：vue-drag