HTMLElement：dragenter 事件
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月.
dragenter 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。
目标对象是用户直接选择的范围（由用户直接指示作为放置目标的元素），或者 <body> 元素。
语法
在 addEventListener() 等方法中使用事件名称，或者设置事件处理器属性。
js
addEventListener("dragenter", (event) => {}); ondragenter = (event) => {}; 事件类型
事件属性
除了以下的属性，来自父接口 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 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"); } }); 结果
规范
| Specification |
|---|
| HTML # handler-ondragenter |
| HTML # event-dnd-dragenter |