YouTipEvent Ondragover
Here's the translated HTML content with all code blocks preserved:
[ Event Object](#)
## Example
Triggered when an element is being dragged over a drop target:
[Try it »](#)
More examples are included at the bottom of this page.
* * *
## Definition and Usage
The ondragover event occurs when a draggable element or text selection is being dragged over a valid drop target.
By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This can be achieved by calling the event.preventDefault() method for the ondragover event.
Drag and drop is a very common feature in HTML5. More information can be found in our HTML tutorial (#).
**Note:** To make an element draggable, use the HTML5 (#) attribute.
**Tip:** Links and images are draggable by default and don't need the draggable attribute.
The following events are triggered during drag and drop operations:
* **Events triggered on the drag target (source element):**
- triggered when the user starts dragging an element
- triggered while an element is being dragged
- triggered when the user finishes dragging the element
* **Events triggered on the drop target:**
- triggered when a dragged object enters the bounds of a container
* ondragover - triggered when a dragged object is being dragged over a container
- triggered when a dragged object leaves the bounds of a container
- triggered when a mouse button is released during a drag operation
**Note:** The ondragover event fires every 350 milliseconds while dragging an element.
* * *
## Browser Support
The numbers in the table specify the first browser version that fully supports the event.
| Event | | | | | |
| --- | --- | --- | --- | --- | --- |
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
* * *
## Syntax
In HTML:
(#)
In JavaScript:
_object_.ondragover=function(){_myScript_};(#)
In JavaScript, using the addEventListener() method:
_object_.addEventListener("dragover", _myScript_);(#)
**Note:** Internet Explorer 8 and earlier versions do not support the [addEventListener()](#) method.
* * *
Technical Details
| Bubbles: | Yes |
| --- |
| Cancelable: | Yes |
| Event type: | DragEvent |
| Supported HTML tags: | All HTML elements |
* * *
## More Examples
## Example
The following example demonstrates all drag and drop events:
/* Triggered when dragging */
document.addEventListener("dragstart", function(event) {
//The dataTransfer.setData() method sets the data type and dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started dragging p element.";
//Change the opacity of the dragged element
event.target.style.opacity = "0.4";
});
//While dragging the p element, change the output text color
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// When finished dragging the p element, output some text and reset opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging p element";
event.target.style.opacity = "1";
});
/* Triggered after dragging */
// When the p element enters 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 in other elements. For drop we must prevent the default handling
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When a 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 (the link is opened by default on drop)
Reset the output text color and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the element 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 »](#)
* * *
## Related Pages
HTML tutorial: (#)
HTML reference: (#)
[ Event Object](#)