(Project) HTML5 Drag and Drop API
HTML5 Drag and Drop API
簡述
HTML5 中的 Drag & Drop API 可以讓我們在瀏覽器中做到拖曳元素、排序元素、或者是讓使用者透過拖拉的方式把要上傳的檔案拉到瀏覽器當中。
在學習 HTML5 Drag & Drop API 時，最重要的是去區分 Drag Source 和 Drop Target，因為它們會需要各自去監聽不同的事件。
Drag Source指的是被點擊要拖曳的物件，也就是藍色的圓，通常是一個 element。Drop Target指的是拖曳的物件被放置的區域，也就是右邊的綠色區域，通常是一個 div container。
Drag & Drop 主要事件
Drag & Drop 提供的事件主要包含(dragstart, drag, dragend, dragenter, dragover, dragleave, drop)，
其中有些是針對 Drag Source 的，有些則是針對 Drop Target 的，整理如下表：
| x | Drag Source | Drag Target | 解釋 | |
| 1 | dragstart | 始拖曳元素時觸發此事件 (點擊元素的瞬間) | ||
| 2 | drag | dragenter | 拖曳元素時觸發此事件 | |
| 3 | dragover | 當元素拖曳到有效位置放置則觸發此事件 | ||
| 4 | dragleave | 拖曳的元素離開有效的位置時觸發 | ||
| 5 | drop | 在有效位置上放置元素時觸發此事件(放下元素) | ||
| 6 | dropend | 單元格 當拖曳結束時會觸發此事件 |
- drag：在 drag source 被拖曳時會持續被觸發。
- dragover：當拖曳的 drag source 到 drop target 上方時會持續被觸發。
記得要針對被拖曳的物件取消預設行為（default）
參考連結
[筆記] 製作可拖曳的元素（HTML5 Drag and Drop API） 详解Html5关于拖拽（Drag 和 drop）的使用和事件
Comments
Join the discussionNo comments yet. Be the first to comment.
