踏入前端工程師領域必備的九堂 HTML5 課(九-下)-Drag and Drop API(下)

踏入前端工程師領域必備的九堂 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))  })});

 

  • 在 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 事件,就有六個事件要操作。因此從前端工程師入門教學的角度來說,HTML5 Drag&Drop API 的實現,其實並不容易。

 

 

 

 

✌推薦閱讀:

 

新手前端工程師需要的 HTML5 入門課 (一)

 

新手前端工程師需要的 HTML5 入門課 (二)

 

新手前端工程師需要的 HTML5 入門課 (三)

 

新手前端工程師需要的 HTML5 入門課 (四)

 

新手前端工程師需要的 HTML5 入門課 (五)

 

新手前端工程師需要的 HTML5 入門課 (六)

 

新手前端工程師需要的 HTML5 入門課 (七)

 

新手前端工程師需要的 HTML5 入門課 (八)

 

新手前端工程師需要的 HTML5 入門課 (九-上)

 

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()