數據傳輸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 加入到藍色的目標元素中。
結果如下:
至此,這一個 HTML5 Drag&Drop API 的基礎範例教學就結束了。為了實現這麼一個簡單的拖曳 API 事件,就有 6 個事件要操作。因此從 前端工程師 入門教學的角度來說,HTML5 Drag&Drop API 的實現,其實並不容易。
相關文章
前端工程師的HTML5教學-Drag and Drop API(上)
前端工程師HTML5入門課: progress顯示條
前端工程師的HTML5入門課:video影片嵌入
前端工程師到底在幹嘛?今天這四種嵌入方法讓你更了解!
想進IT產業,Java和Python這兩種程式語言你不能不知道!
哪種程式語言你應該先學?快進來找答案!
使用 Python 的 ''海龜''Turtle 繪圖模塊畫皮卡丘!!