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 2015年7月.
dragend 事件在拖放操作结束时触发（通过释放鼠标按钮或单击 escape 键）。
该事件无法取消。
语法
在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("dragend", (event) => {}); ondragend = (event) => {}; 事件类型
事件属性
除了以下列出的额外属性，还可以使用从父接口 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 # handler-ondragend |
| HTML # event-dnd-dragend |
浏览器兼容性
Loading…