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时给过程对象加同级拖拽标识

p1bVVP.jpg

  1. 在dragenter时同时记录下进入时鼠标的坐标(x1, y1)

  2. 当dragover时依然记录下鼠标的坐标(x2, y2)

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

p1bOzQ.jpg

  1. 当dragleave时,去掉所有标识
  2. 当drop时,获取dataTransfer对象的数据,并更新拖拽数据
  3. 当dragend时,去掉所有标识

效果

  1. 拖拽到子级

p1qz1e.jpg

2.拖拽到同级

p1Ly9O.jpg

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

关注下面的标签,发现更多相似文章
评论
说说你的看法