拖放事件

dom被拖拽--->經(jīng)過一些dom--->到達(dá)指定dom

• 被拖拽的dom：（源對象）

  dragstart 源對象被拖拽

  drag 源對象拖拽過程中

  dragend 源對象拖拽結(jié)束（drop事件后執(zhí)行）

• 拖拽過程中經(jīng)過的dom：（過程對象）

  dragenter 源對象進(jìn)入過程對象

  dragover 源對象在過程對象中移動 (設(shè)置event.preventDefault(),否則drop事件不會執(zhí)行)

  drageleave 源對象離開過程對象

• 拖拽到達(dá)指定的dom：（目標(biāo)對象）

  drop 拖放到指定目標(biāo)對象內(nèi)

• dataTransfer對象：（拖拽過程中數(shù)據(jù)傳遞對象）

  setData()存入數(shù)據(jù)

  支持格式：text/plain、text/html、text/xml、text/url-list

  getData()

  clearData()

實(shí)現(xiàn)

實(shí)現(xiàn)目錄可在同級、子級拖動

思路：

在dragstart時(shí)向dataTransfer對象存入源對象的數(shù)據(jù)

在dragenter時(shí)給過程對象加同級拖拽標(biāo)識

在dragenter時(shí)同時(shí)記錄下進(jìn)入時(shí)鼠標(biāo)的坐標(biāo)（x1, y1）

當(dāng)dragover時(shí)依然記錄下鼠標(biāo)的坐標(biāo)（x2, y2）

設(shè)定規(guī)則加子級拖拽標(biāo)識，例如:Math.abs(x2-x1) > 50

當(dāng)dragleave時(shí)，去掉所有標(biāo)識

當(dāng)drop時(shí)，獲取dataTransfer對象的數(shù)據(jù)，并更新拖拽數(shù)據(jù)

當(dāng)dragend時(shí)，去掉所有標(biāo)識

效果

拖拽到子級

2.拖拽到同級

此例子是結(jié)合vue遞歸組件實(shí)現(xiàn)：vue-drag

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。