前端工程師入門HTML5就靠這些撇步!(8下)製作拖曳元素

你以為你已經把HTML5拖曳元素學完了嗎?錯啦!看完這篇才是高手!

數據傳輸 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 加入到藍色的目標元素中。

結果如下：

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

到這裡，這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。

為了實現這麼一個簡單的拖曳 API 事件，就有 6 個事件要操作。因此，我們從前端工程師入門教學的角度來說，HTML5 Drag&Drop API 的實現，其實並不容易。


👉延伸閱讀區：

前端工程師入門HTML5就靠這些撇步!(7)瀏覽器儲存簡介

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素

前端工程師入門HTML5就靠這些撇步!(9)地理位置定位

素人變身工程師最佳捷徑,還不來上Java課程!

部落客必學的HTML5教學法寶三-善用標籤,節省時間!

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

達內教育開幕　培養台灣IT人才進入全球企業