HTML5入門課-Drag and Drop API(下) @ Java課程是為了今日．Python課程是為了將來

接續上篇HTML5的入門課-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））  }）}）;