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)，该函数指定了要拖动的数据。
The dataTransfer.setData() 方法设置了被拖动数据的类型和值。
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
在本例中，数据类型为“text”，值为可拖动元素的 id（“drag1”）。
放置位置 - ondragover
The 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”）。
- 将被拖动元素附加到放置元素中。
