ondragleave 事件
描述
ondragleave
事件在可拖拽选择离开拖放目标时发生。
ondragenter
和 ondragleave
事件可以帮助用户更好地理解可拖拽元素何时在拖放目标上方。例如,当可拖拽元素进入拖放目标时设置背景颜色,当元素移出目标时移除颜色。
拖放是 HTML 中的常见功能。它指的是“抓取”一个对象并将其拖动到不同位置的操作。
要使元素可拖拽,请使用draggable 属性。
更多信息请参见HTML 拖放教程。
链接和图片默认可拖拽,不需要 draggable 属性。
在拖放操作的不同阶段会发生许多事件(见下文)
拖放事件
在可拖拽元素上
事件 | 发生时间 |
---|---|
ondrag | 元素正在被拖拽 |
ondragstart | 用户开始拖拽一个元素 |
ondragend | 用户已完成拖拽一个元素 |
注意:在拖拽元素时,ondrag 事件每 350 毫秒触发一次。
在拖放目标上
事件 | 发生时间 |
---|---|
ondragenter | 被拖拽元素进入放置目标 |
ondragleave | 被拖拽元素离开放置目标 |
ondragover | 被拖拽元素在放置目标上方 |
ondrop | 被拖拽元素被放置到目标上 |
另请参阅
教程
语法
技术详情
冒泡 | 是 |
---|---|
可取消 | 否 |
事件类型 | DragEvent |
HTML 标签 | 所有 HTML 元素 |
DOM 版本 | Level 3 Events |
更多示例
示例
所有可能拖放事件的演示
<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>
自己动手试一试 »
浏览器支持
ondragleave
是 DOM Level 3 (2004) 的特性。
所有现代浏览器都完全支持它
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 11 |