ondragover event

ondragover Event

Instance

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#droptarget {
    float: left; 
    width: 200px; 
    height: 35px;
    margin: 55px;
    margin-top: 155px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">把我拖动到矩形框中！</p>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
    event.preventDefault();
    document.getElementById("demo").innerHTML = " p 元素在放置目标上";
    event.target.style.border = "4px dotted green";
}
function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    document.getElementById("demo").innerHTML = " p 元素被拖动";
}
</script>

</body>
</html>

Run Instance»

Click "Run Instance" button to view an online instance

More examples are included at the bottom of this article.

Definition and Usage

The ondragover event is triggered when a draggable element or selected text is being dragged to the drop target.

By default, data/elements cannot be placed into other elements. If we want to implement the change function, we need to avoid the default processing method of the element. We can do this by calling event.preventDefault() method to implement ondragover event.

Drag and drop is a very common feature in HTML5. More information can be found in our HTML HTML5 drag and drop in tutorial.

Note: In order to make an element draggable, you need to use the HTML5draggable attribute.

Tip: Links and images are draggable by default and do not require the draggable attribute.

The following events will be triggered during the drag and drop process:

Trigger events on the drag target (source element):
- ondragstart - Fires when the user starts dragging the element
- ondrag - Fires when the element is being dragged
- ondragend - Fires when the user completes dragging the element

Events triggered when the target is released:
- ondragenter - This event is triggered when the object dragged by the mouse enters its container scope
- ondragover - This event is triggered when a dragged object is dragged within the container range of another object
- ondragleave - This event is triggered when the object being dragged by the mouse leaves the range of its container
- ondrop - This event is triggered when the mouse button is released during a dragging process

Note: When dragging an element, each The ondragover event is triggered every 350 milliseconds.

Browser support

The number in the table indicates the version number of the first browser that supports the event.

##ondragover4.09.03.56.012.0

Syntax

In HTML:

<element ondragover="myScript"> Try it

JavaScript:

object.ondragover=function(){myScript};Try it

In JavaScript, use the addEventListener() method:

object.addEventListener("dragover", myScript); try it

Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical details

event

Whether bubbling is supported:	Yes
Can be canceled:	Yes
Event type:	DragEvent
Supported HTML tags:	All HTML elements

##More examples

Examples

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>在两个矩形框中来回拖动 p 元素:</p>
<div class="droptarget">
	<p draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。</p>
<p id="demo"></p>
<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元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id(“drag1”)
拖拽元素附加到drop元素*/
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>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

##Related Pages

HTML Tutorial: HTML5 Drag and Drop

HTML Reference Manual: HTML draggable attribute

← ondragend event

ondrop event →