HTML 拖放 API

HTML 拖放 API 允许元素被拖拽和放置。

实例

将 W3School 图片拖拽到第二个矩形中。

请把 W3School 图片拖到矩形中。

拖放

拖放是一个非常常见的功能。它指的是当您“抓住”一个对象并将其拖拽到不同位置时。

浏览器支持

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

Chrome	Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
4.0	9.0	3.5	6.0	12.0

HTML 拖放 API 示例

下面的例子是一个简单的拖放示例：

实例

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>

亲自试一试

它可能看起来很复杂，但让我们逐步了解拖放事件的各个部分。

使元素可拖拽

首先：要使元素可拖拽，将 draggable 属性设置为 true：

<img id="img1" draggable="true">

或：

<p id="p1" draggable="true">可拖拽的文本</p>

拖拽什么 - ondragstart 和 setData()

然后，指定当元素被拖拽时应发生什么。

在上面的示例中，<img> 元素的 ondragstart 属性调用了一个函数（dragstartHandler(ev)），该函数指定了要拖拽的数据。

dataTransfer.setData() 方法设置了拖拽数据的类型和值：

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

在本例中，数据类型为 "text"，值是可拖拽元素的 id（"img1"）。

放置位置 - ondragover

<div> 元素的 ondragover 属性调用了一个函数（dragoverHandler(ev)），该函数指定了拖拽数据可以放置的位置。

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

这是通过为 ondragover 事件调用 preventDefault() 方法来实现的：

function dragoverHandler(ev) {
  ev.preventDefault();
}

执行放置 - ondrop

当拖拽的数据被放置时，会发生一个 drop 事件。

在上面的示例中，<div> 元素的 ondrop 属性调用了一个函数，dropHandler(event)：

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

代码解释：

调用 preventDefault() 以防止浏览器对数据的默认处理（默认情况下是作为链接打开）
使用 dataTransfer.getData() 方法获取拖拽的数据。该方法将返回在 setData() 方法中设置的任何相同类型的数据
拖拽的数据是拖拽元素的 id（"img1"）
将拖拽的元素追加到放置元素中

更多实例

实例

如何将 <h1> 元素拖放到 <div> 元素中：

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">W3School.com.cn</h1>

亲自试一试

实例

如何将 <a> 元素拖放到 <div> 元素中：

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://w3school.com.cn" draggable="true" ondragstart="dragstartHandler(event)">W3School.com.cn</a>

亲自试一试

实例

如何将图片在两个 <div> 元素之间来回拖放：

亲自试一试