HTML5基礎訓練班第八課-Drag & Drop API介紹(下)

要在HTML5裡達到拖曳的的效果其實並不難!只要善用目標元素就可以完成傳輸數據了!

數據傳輸DataTransfer

HTML5中,拖曳動作的目的,最主要是為了對來源和目標元素做操作。為了能夠完成整個操作,就需要在來源元素和目標元素間進行傳輸數據。所以在 HTML5中,前端工程師藉由 Javascript 的 DataTransfer 完成數據傳輸。

我們在上例的 dragstart 時,就設置需要傳輸的數據,在 drop 中獲取需要的數據。 event.dataTransfer 提供了兩個主要函數:

1. setData(format, data):用於添加數據,一般 format 對應於 MIME 類型字符串,常見的有 text/plain、text/html 及 text/uri-list 等,但同時也可以 是任意自定義的類型;不幸的是 data 只能是 string 或 file。

2. 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))  })});

 

1. 在 dragstart 時,透過 setData 將 ID 放入 DataTransfer 中

2. 在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基礎訓練班第九課-瀏覽器儲存介紹


網路行銷菜鳥的日記Day1-HTML5教學,第一次寫不用錢!?


看電子書總是少點什麼?有了HTML5教學給你翻頁的溫度!


Java課程、UI課程、程式課程、網路行銷課程推薦


Java課程讓我百萬年薪科技新貴之路只需要六個月!


善用網路行銷課程,每個人都來你這裡


這十位人工智慧的先驅,既抓住了未來的脈絡,也奠定AI厚實的基礎

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