H5 拖放（Drag & Drop）
阿新 • • 發佈：2018-11-06
H5 拖放（Drag & Drop）
一、拖放
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
拖放是一種常見的特性，即抓取物件以後拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
二、瀏覽器支援
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。
註釋：在 Safari 5.1.2 中不支援拖放。
三、屬性介紹
0、程式碼示例
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>
1、draggable
設定元素為可拖放。
首先，為了使元素可拖動，把
draggable屬性設定為true：
<img draggable="true" />2、ondragstart
然後，規定當元素被拖動時，會發生什麼。
在上面的例子中，
ondragstart屬性呼叫了一個函式，drag(event)，它規定了被拖動的資料。
dataTransfer.setData()方法設定被拖資料的資料型別和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
在這個例子中，資料型別是 "Text"，值是可拖動元素的 id ("drag1")。
3、ondragover
ondragover事件規定在何處放置被拖動的資料。預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。這要通過呼叫
ondragover事件的event.preventDefault()方法：
function allowDrop(ev) {
ev.preventDefault();
}4、ondrop
當放置被拖資料時，會發生
drop事件。在上面的例子中，
ondrop屬性呼叫了一個函式，drop(event)：
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
- 呼叫
preventDefault()來避免瀏覽器對資料的預設處理（drop事件的預設行為是以連結形式開啟）- 通過
dataTransfer.getData("Text")方法獲得被拖的資料。該方法將返回在setData()方法中設定為相同型別的任何資料。- 被拖資料是被拖元素的
id ("drag1")- 把被拖元素追加到放置元素（目標元素）中
四、屬性生命週期
重點，記一下：
| 生命週期 | 屬性 | 描述 |
|---|---|---|
| 拖動開始 | ondragstart |
在拖動操作開始時執行指令碼（物件是被拖拽元素） |
| 拖動過程中 | ondrag |
只要指令碼在被拖動就允許指令碼（物件是被拖拽元素） |
| 拖動過程中 | ondragenter |
當元素被拖動到一個合法的放置目標時，執行指令碼（物件是目標元素） |
| 拖動過程中 | ondragover |
只要元素正在合法的放置目標上拖動時，就執行指令碼（物件是目標元素） |
| 拖動過程中 | ondragleave |
當元素離開合法的放置目標時（物件是目標元素） |
| 拖動結束 | ondrop |
將被拖拽元素放在目標元素內時執行指令碼（物件是目標元素） |
| 拖動結束 | ondragend |
在拖動操作結束時執行指令碼（物件是被拖拽元素） |
被拖拽的元素，執行相關的屬性方法：
<span
id="dragId"
draggable="true" // 設定元素可拖動
ondragstart="handleDragStart(this, event)" // 拖動開始時
ondrag="handleDrag(this, event)" // 開始拖動
ondragend="handleDragEnd(this, event)"> // 拖動結束時
<img src="../images/dragImg.png">
</span>目標元素，執行相關的屬性方法：
<div
id="targetId"
ondragenter="handleDragEnter(this, event)" // 當元素被拖動到一個合法的放置目標時
ondragover="handleDragOver(this,event)" // 只要元素正在合法的放置目標上拖動時
ondragleave="handleDragLeave(this, event)" // 當元素離開合法的放置目標時
ondrop="handleDrop(this, event)"> // 將被拖拽元素放在目標元素內時
</div>五、dataTransfer
參考連結：DataTransger
1、成員列表
| 屬性 | 描述 |
|---|---|
dropEffect |
設定或獲取拖拽操作的型別和要顯示的游標型別。 |
effectAllowed |
設定或獲取資料傳送操作可應用於該物件的源元素。 |
| 方法 | 描述 |
|---|---|
clearData |
通過 dataTransfer 或 clipboardData 物件從剪貼簿刪除一種或多種資料格式。 |
getData |
通過 dataTransfer 或 clipboardData 物件從剪貼簿獲取指定格式的資料。 |
setData |
以指定格式給 dataTransfer 或 clipboardData 物件賦予資料。 |
2、解析
dataTransfer物件使得自定義處理拖拽操作成為可能。你可通過event物件完成這種功能。
dataTransfer物件可於源物件和目標物件中使用。典型用法是，
setData方法用於源事件，以便提供關於將要進行傳送的資料的資料。相應的，
getData方法用於目標事件以便確保獲取的資料和資料格式。
參考資料
https://developer.mozilla.org/en-US/docs/Web/Events/dragstart
https://www.jb51.net/shouce/dhtml/objects/obj_datatransfer.html
--
http://www.w3school.com.cn/html5/html_5_draganddrop.asp
https://www.cnblogs.com/ijjyo/p/4300717.html
https://blog.csdn.net/qq_37111953/article/details/78278048