HTMLElement: dragenter 事件

当拖动的元素或文本选择进入有效的放置目标时，会触发 dragenter 事件。目标对象是直接用户选择（用户直接指示为放置目标的元素）或<body> 元素。

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

语法

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

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

ondragenter = (event) => {};

事件类型

一个 DragEvent。继承自 Event。

Event UIEvent MouseEvent DragEvent

事件属性

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

DragEvent.dataTransfer 只读

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

示例

在 dragenter 上设置放置区域样式

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

我们监听 dragenter 事件，当可拖动元素在容器上时，会给另一个容器一个紫色背景，以指示可拖动元素可以放到容器上。

但是，在这个部分示例中，我们没有实现放置：有关拖放的完整示例，请参阅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-ondragenter
HTML 标准
# event-dnd-dragenter

浏览器兼容性

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

另请参阅