ondragover
Event
Example
Triggered when an element is being dragged over a drop target:
More examples are included at the bottom of this page.
Definition and Usage
The ondragover
event is triggered 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 allow this, we need to prevent the default handling of the element. This can be achieved by calling the event.preventDefault()
method on the ondragover
event.
Drag and drop is a common feature in HTML5. For more information, see HTML5 Drag and Drop in our HTML tutorial.
Note: To make an element draggable, use the HTML5 draggable attribute.
Tip: Links and images are draggable by default and do not require the draggable
attribute.
The following events are triggered during the drag and drop process:
Events triggered on the drag target (source element):
- ondragstart - Triggered when the user starts dragging an element
- ondrag - Triggered while the element is being dragged
- ondragend - Triggered when the user finishes dragging the element
Events triggered on the drop target:
- ondragenter - Triggered when the dragged object enters its container
- ondragover - Triggered when the dragged object is being dragged over another container
- ondragleave - Triggered when the dragged object leaves its container
- ondrop - Triggered 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 version that supports the event.
Event | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
In HTML:
In JavaScript:
In JavaScript, using the addEventListener()
method:
Note: Internet Explorer 8 and earlier versions do not support the addEventListener()
method.
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:
Related Pages
HTML Tutorial: HTML5 Drag and Drop
HTML Reference: HTML draggable Attribute