前端工程師的十個HTML5養成技巧(8)(下篇)製作拖曳的元素

前端工程師的HTML5養成技巧(8下)製作拖曳的元素

前端工程師的HTML5養成技巧(8下)製作拖曳的元素
前端工程師的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)地理位置定位

Python課程的老師帶你分析谷歌跟蜻蜓計畫的愛恨情仇!

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

正在學網路行銷課程的你,是否也被虛擬人生APP吸引了呢?

達內課程先就業再付款- 中時電子報

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料