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")
- 将被拖拽的元素追加到放置元素中
