HTMLElement：drop 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

drop 事件在元素或文本选择被放置到有效的放置目标上时触发。为确保 drop 事件始终按预期触发，应当在处理 dragover 事件的代码部分始终包含 preventDefault() 调用。

语法

在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。

js
addEventListener("drop", (event) => {});

ondrop = (event) => {};

事件类型

一个 DragEvent。继承自 Event。

Event UIEvent MouseEvent DragEvent

事件属性

除了下面列出的属性外，还可以使用父接口 Event 的属性。

DragEvent.dataTransfer 只读

在进行拖放操作时，传输的数据。

示例

一个最小的拖放示例

在此示例中，我们在容器内有一个可拖动元素。尝试抓住这个元素，将其拖到另一个容器中，然后释放它。

我们在这里使用了三个事件处理器：

  • 在 dragstart 事件处理器中，我们获得对用户拖动的元素的引用。
  • 在目标容器的 dragover 事件处理器中，我们调用 event.preventDefault()，以使得该元素能够接收 drop 事件。
  • 在放置区域的 drop 事件处理器中，我们将可拖动元素从原先的容器移动到该放置区域。

完整的拖放示例，请参见 drag 事件。

HTML

html
<div class="dropzone">
  <div id="draggable" draggable="true">这个 div 可以拖动</div>
</div>
<div class="dropzone" id="droptarget"></div>

CSS

css
body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

JavaScript

js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // 保存被拖动元素的引用
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // 阻止默认行为以允许放置
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // 阻止默认行为（会作为某些元素的链接打开）
  event.preventDefault();
  // 将被拖动的元素移动到选定的放置目标
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});

结果

规范

Specification
HTML
# ix-handler-ondrop
HTML
# event-dnd-drop

浏览器兼容性

BCD tables only load in the browser

参见