ondragenter 事件
描述
当可拖动选择进入放置目标时，会发生ondragenter 事件。
ondragenter 和 ondragleave 事件可以帮助用户更好地了解何时可拖动元素位于放置目标之上。例如，通过在可拖动元素进入放置目标时设置背景颜色，并在元素移出目标时删除颜色。
拖放是 HTML 中的常见功能。这是你“抓住”一个对象并将其拖放到不同位置的时候。
要使元素可拖动，请使用可拖动属性。
有关更多信息，请参阅HTML 拖放教程。
链接和图像默认情况下是可拖动的，不需要可拖动属性。
在拖放操作的不同阶段会发生许多事件（见下文）
拖放事件
在可拖动元素上
| 事件 | 发生时间 |
|---|---|
| ondrag | 元素正在被拖动 |
| ondragstart | 用户开始拖动元素 |
| ondragend | 用户已完成拖动元素 |
注意: 在拖动元素时，ondrag 事件每 350 毫秒触发一次。
在放置目标上
| 事件 | 发生时间 |
|---|---|
| ondragenter | 拖动的元素进入放置目标 |
| ondragleave | 拖动的元素离开放置目标 |
| ondragover | 拖动的元素位于放置目标之上 |
| ondrop | 拖动的元素被放置在目标上 |
另请参阅
教程
语法
技术细节
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件类型 | DragEvent |
| HTML 标签 | 所有 HTML 元素 |
| DOM 版本 | 级别 3 事件 |
更多示例
示例
所有可能的拖放事件的演示
<p draggable="true" id="dragtarget">拖动我！</p>
<div class="droptarget">放在这里！</div>
<script>
// 在拖动目标上触发的事件
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() 方法设置拖动数据的类型和值
event.dataTransfer.setData("Text", event.target.id);
// 开始拖动 p 元素时输出一些文本
document.getElementById("demo").innerHTML = "开始拖动 p 元素。";
// 更改可拖动元素的不透明度
event.target.style.opacity = "0.4";
});
// 在拖动 p 元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// 完成拖动 p 元素时输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "拖动 p 元素完成。";
event.target.style.opacity = "1";
});
// 在放置目标上触发的事件
// 当可拖动 p 元素进入放置目标时，更改 DIV 的边框样式
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// 默认情况下，数据/元素不能放置在其他元素中。若要允许放置，我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// 当可拖动 p 元素离开放置目标时，重置 DIV 的边框样式
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* 放置时 - 阻止浏览器对数据的默认处理（默认情况下，在放置时打开为链接）
重置输出文本和 DIV 的边框颜色
使用 dataTransfer.getData() 方法获取拖动的数据
拖动的数据是拖动元素的 id ("drag1")
将拖动元素追加到放置元素中
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
自己尝试 »
浏览器支持
ondragenter 是 DOM Level 3 (2004) 的功能。
它在所有现代浏览器中得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
