標籤

網頁設計之HTML5初級教學(8)-Drag & Drop機制下篇


網頁設計之HTML5初級教學(8)-Drag & Drop機制下篇
 想要在HTML5中達到拖曳的成效其實只要幾個步驟就可以辦到了!一起來看看吧!

數據傳輸DataTransfer

在HTML5中，拖曳動作的目的，最主要是為了對來源和目標元素做操作。為了能夠完成整個操作，就需要在來源元素和目標元素間進行傳輸數據。所以在 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初級教學(9)-Web storage 簡介

專家不藏私HTML5教學之1-想要網頁舒服好閱讀,排版是關鍵

部落客必學的HTML5教學法寶一-免費網頁編輯器!

美國NASDAQ上市公司、外商IT教育培訓企業

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

慢慢來比較快-選擇對的網路行銷課程降低你的出錯
人工智慧在醫療界的地位已不可動搖,今天的介紹會讓你會驚呼連連!
標籤：

熱門文章