拖放事件
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.拖拽到同級