这个ondragover
事件发生时可拖动的选择被拖动到目标上。
默认情况下,数据/元素不能被删除到其他元素中。为了允许删除,我们必须阻止元素的默认处理。这是通过调用 ondragover 事件的 event.preventDefault() 方法来完成的。
拖放是 HTML 中的一个常见功能。当您 "grab" 一个对象并将其拖动到其他位置时。
要使元素可拖动,请使用可拖动属性。
欲了解更多信息,请参阅HTML 拖放教程。
链接和图片默认是可拖动的,不需要draggable属性。
许多事件发生在拖放操作的不同阶段(见下文):
Event | Occurs When |
---|---|
ondrag | An element is being dragged |
ondragstart | The user starts to drag an element |
ondragend | The user has finished dragging an element |
笔记:拖动元素时,翁德拉格事件每 350 毫秒触发一次。
事件 | 发生时间 |
---|---|
翁德拉根特 | 拖动的元素进入放置目标 |
拖拽离开 | 拖动的元素离开放置目标 |
翁德拉戈弗 | 拖动的元素位于放置目标上方 |
上落 | 拖动的元素被放置在目标上 |
气泡: | 是的 |
---|---|
可取消: | 是的 |
事件类型: | 拖动事件 |
HTML 标签: | 所有 HTML 元素 |
DOM 版本: | 3 级活动 |
所有可能的拖放事件的演示:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>
亲自试一试 »
ondragover
是 DOM Level 3 (2004) 功能。
所有现代浏览器都完全支持它:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 11 |
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!