• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Event Attributes
• Drag Events Attribute
• Definition and Usage of HTML ondragover Event Attribute

Definition and Usage of HTML ondragover Event Attribute

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:

• Events fired on the draggable target (the source element):
  • ondragstart - fires when the user starts to drag an element
  • ondrag - fires when an element is being dragged
  • ondragend - fires when the user has finished dragging the element


• Events fired on the drop target:
  • ondragenter - fires when the dragged element enters the drop target
  • ondragover - fires when the dragged element is over the drop target
  • ondragleave - fires when the dragged element leaves the drop target
  • ondrop - fires when the dragged element is dropped on the drop target

Note: While dragging an element, the ondragover event fires every 350 milliseconds.