HTML 拖放 API
在 HTML 中，任何元素都可以拖放。
示例
將 W3Schools 圖片拖放到矩形框中。
拖放
拖放是一項非常常見的操作。它是指“抓住”一個物件並將其拖動到另一個位置。
瀏覽器支援
表格中的數字表示完全支援拖放的第一個瀏覽器版本。
| API | |||||
|---|---|---|---|---|---|
| 拖放 | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML 拖放示例
下面的示例是一個簡單的拖放示例
示例
<!DOCTYPE HTML>
<html>
<head>
<script>
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>
自己動手試一試 »這看起來可能很複雜，但讓我們一步步瞭解拖放事件的所有不同部分。
使元素可拖動
首先：要使元素可拖動，請將 draggable 屬性設定為 true。
<img draggable="true">
拖動什麼 - ondragstart 和 setData()
然後，指定拖動元素時應發生什麼。
在上面的示例中，ondragstart 屬性呼叫一個函式 drag(event)，該函式指定要拖動的資料。
dataTransfer.setData() 方法設定拖動資料的資料型別和值。
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在這種情況下，資料型別是“text”，值為可拖動元素的 id（“drag1”）。
在哪裡放置 - ondragover
ondragover 事件指定可以放置拖動資料的位置。
預設情況下，資料/元素不能放置在其他元素中。要允許放置，我們必須阻止元素的預設處理。
這透過為 ondragover 事件呼叫 event.preventDefault() 方法來完成。
event.preventDefault()
執行放置 - ondrop
當拖動的資料被放置時，會發生一個 drop 事件。
在上面的示例中，ondrop 屬性呼叫一個函式 drop(event)。
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
程式碼說明
- 呼叫 preventDefault() 以阻止瀏覽器對資料的預設處理（預設是在放置時作為連結開啟）。
- 使用 dataTransfer.getData() 方法獲取拖動的資料。此方法將返回在 setData() 方法中設定為相同型別的所有資料。
- 被拖拽的資料是被拖拽元素的 ID ("drag1")
- 將被拖拽的元素追加到放置元素中
