想跟風當程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(10)-Drag and Drop API(下).
數據傳輸DataTransfer
拖曳動作的目的，是為了對來源和目標元素做操作。為了完成整個操作，就需要在來源元素和目標元素間傳輸數據。在 HTML5 中， 前端工程師 透過 Javascript 的 DataTransfer 完成數據傳輸。我們在上例的 dragstart 時，就設置需要傳輸的數據，在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數：
- setData(format, data)：用於添加數據，一般 format 對應於 MIME 類型字符串，常見的有 text/plain、text/html 及 text/uri-list 等，但同時也可以是任意自定義的類型；不幸的是 data 只能是 string 或 file。
- getData(format)：用於獲取數據。
現在，我們的目的是要將 「Drag Me」元素放到其它藍色的目標元素中，如此就需要傳輸它的 ID ，通過下面的 Javascript 語法來實現：
draggable.addEventListener（'dragstart'，（ev）=> {
ev.target.style.opacity = “。5” ;
//設置ID
ev.dataTransfer.setData（'text / plain'，ev.target.id）;
}）;
dropzones.forEach（（dropzone）=> {
dropzone.addEventListener（'drop'，（ev）=> {
ev.preventDefault（）
ev.target.style.borderStyle = 'solid' ;
//獲取ID const sourceId = ev.dataTransfer.getData（'text / plain'）
ev.target.appendChild（document .getElementById（sourceId）） }）}）;
- 在 dragstart 時，透過 setData 將 ID 放入 DataTransfer 中
- 在drop事件中，透過 getData 獲取元素 ID ，並透過 appendChild 加入到藍色的目標元素中。
結果如下：
到了這裡, HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的可拖曳 API 事件，就有 6 個元素需要操作。因此從 前端工程師 入門教學的角度來說，HTML5 Drag&Drop API 的實現，其實並不容易完成。
參考連結:
HTML5新手入門課程(1)-7個內容模組簡介
HTML5新手入門課程(2)-三大基本元素排版
HTML5新手入門課程(9)-Drag and Drop API(上)
前端工程師不可不知的網頁顏色代碼,今天直接整理給你!
前端工程師入門款小常識-CSS碼特性一下就上手!
前端工程師必知第二課-CSS碼的Class選擇器宣告法
中國IT教育領導品牌 達內教育集團第一家海外授權中心
