HTMLElement：dragleave 事件

当拖动的元素或文本选择离开有效的放置目标时，将触发 dragleave 事件。

此事件不可取消，并且可能会冒泡到 Document 和 Window 对象。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

ondragleave = (event) => {};

事件类型

一个 DragEvent。继承自 Event。

Event UIEvent MouseEvent DragEvent

事件属性

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

DragEvent.dataTransfer 只读

在拖放交互期间传输的数据。

示例

在 dragleave 上重置放置区域样式

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

当可拖动元素位于上面时，我们为另一个容器提供紫色背景，以表明它可以放置到该容器中。我们监听 dragleave 事件，以便在将可拖动元素拖出容器时重置容器背景。

但是，在此部分示例中，我们尚未实现放置：有关拖放的完整示例，请参阅 drag 事件的页面。

HTML

html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>

CSS

css
body {
  /* Prevent the user from 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;
}

.dropzone.dragover {
  background-color: purple;
}

JavaScript

js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});

结果

规范

规范
HTML 标准
# ix-handler-ondragleave
HTML 标准
# event-dnd-dragleave

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅