HTML 拖放API

在 HTML 中，任何元素都可以被拖放。

示例

将 91xjr 图片拖到矩形中。

拖放

拖放是一个非常常见的功能。当您 "grab" 一个对象并将其拖动到其他位置时。

浏览器支持

表中的数字指定第一个完全支持拖放的浏览器版本。

API
Drag and Drop	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属性为真：

拖动什么 - ondragstart 和 setData()

然后，指定拖动元素时应该发生的情况。

在上面的例子中，ondragstart属性调用一个函数，drag(event)，指定要拖动的数据。

这个dataTransfer.setData()方法设置数据类型和拖动数据的值：

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

在本例中，数据类型为"text"，值是可拖动元素的 id ("drag1")。

放置位置 - ondragover

这个ondragover事件指定可以将拖动的数据放置在何处。

默认情况下，数据/元素不能被删除到其他元素中。为了允许删除，我们必须阻止元素的默认处理。

这是通过调用来完成的event.preventDefault()ondragover 事件的方法：

event.preventDefault()

执行 Drop - ondrop

当拖动的数据被放置时，会发生放置事件。

在上面的示例中，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")
将拖动的元素附加到放置元素中

码农教程 - 一技在手,衣食无忧!