拖放事件

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()

實現

實現目錄可在同級、子級拖動

思路：

在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

總結

以上是生活随笔為你收集整理的Vue结合HTML5拖放API 实现目录拖拽～的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。