ondragoverEvent

Example

Fires when the element is being dragged onto a drop target:

This article contains more examples at the bottom.

Definition and Usage

The ondragover event fires when a draggable element or selected text is being dragged over a drop target.

By default, data/elements cannot be dropped into other elements. To implement this function, we need to prevent the element's default handling method. We can implement the ondragover event by calling the event.preventDefault() method.

Drag and drop is a very common feature in HTML5. For more information, see the HTML tutorial on our site:HTML5 Drag and Drop。

Note:To make an element draggable, you need to use the HTML5draggableattribute.

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

The following events are triggered during the drag and drop process:

Events fired on the drag target(Source element):
- ondragstart- Fires when the user starts dragging an element
- ondrag- Fires while the element is being dragged
- ondragend- Fires after the user completes dragging the element

Events fired on the drop target:
- ondragenter- Fires when the dragged object enters the range of its container
- ondragover - Fires when a dragged object is dragged within the range of another object's container
- ondragleave- Fires when the dragged object leaves the range of its container
- ondrop- Fires when the mouse button is released during a drag operation

Note:The ondragover event is triggered every 350 milliseconds while dragging an element.

Browser Support

The numbers in the table specify the first browser versions that fully support the event.

Event
ondragover	4.0	9.0	3.5	6.0	12.0

Syntax

In HTML:

<element ondragover="myScript">Try it Yourself

In JavaScript:

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

In JavaScript, using the addEventListener() method:

object.addEventListener("dragover", myScript);Try it Yourself

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

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	DragEvent
Supported HTML tags:	All HTML elements

More Examples

Example

The following example demonstrates all the drag and drop events:

/* Fired when dragging */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the dragged data
    event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started dragging the p element.";
// Modify the opacity of the dragged 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";
});
// When the p element has been dragged, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Completed dragging the p element";
    event.target.style.opacity = "1";
});
/* Fired after dragging is completed */
// When the p element is dragged into the droptarget, change the div'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 into other elements. For 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 div's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* For drop, prevent the browser's default handling of data (links are opened by default on drop)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to obtain the dragged data
The dragged data element's id ("drag1")
Append the dragged element to 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));
    }
});

Try it Yourself »

HTML Tutorial:HTML5 Drag and Drop

HTML Reference Manual:HTML draggable Attribute