Execute a JavaScript when an element is being dragged over a drop target:
The ondragover attribute fires 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 is done by calling the event.preventDefault() method for the ondragover attribute.
Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, see our HTML Tutorial on HTML5 Drag and Drop.
Note: To make an element draggable, use the global HTML5 draggable attribute.
Tip: Links and images are draggable by default, and do not need the draggable attribute.
There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:
Note: While dragging an element, the ondragover event fires every 350 milliseconds.
The numbers in the table specify the first browser version that fully supports the event attribute.
Event Attribute | |||||
---|---|---|---|---|---|
ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
The ondragover attribute is new in HTML5.
Value | Description |
---|---|
script | The script to be run on ondragover |
Supported HTML tags: | ALL HTML elements |
---|
HTML Tutorial: HTML5 Drag and Drop
HTML Reference: HTML draggable Attribute
HTML DOM Reference: ondragover Event