Document：dragend 事件

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.

dragend 事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。

该事件无法取消。

语法

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

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

ondragend = (event) => {};

事件类型

DragEvent，继承自 Event。

Event UIEvent MouseEvent DragEvent

事件属性

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

DragEvent.dataTransfer 只读

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

示例

在拖放结束时重置不透明度

在本示例中，我们在容器中有一个可拖动的元素。尝试抓住元素，拖动它，然后释放它。

我们在拖动元素时，使元素变得半透明，并监听 dragend 事件以在释放元素时重置其不透明度。

参见 drag 事件，以获取完整的拖放示例。

HTML

html
<div id="container">
  <div id="draggable" draggable="true">这个 div 是可拖动的</div>
</div>
<div class="dropzone"></div>

CSS

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

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

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}

JavaScript

js
document.addEventListener("dragstart", (event) => {
  // make it half transparent
  event.target.classList.add("dragging");
});

document.addEventListener("dragend", (event) => {
  // reset the transparency
  event.target.classList.remove("dragging");
});

结果

规范

Specification
HTML Standard
# ix-handler-ondragend
HTML Standard
# event-dnd-dragend

浏览器兼容性

BCD tables only load in the browser

参见