Dragover

Dragover is a DOM event in the HTML5 Drag and Drop API. It fires when a dragged item is moved over a potential drop target, and it may continue to fire as the cursor moves within that target. The event helps an application determine whether dropping the item is allowed and how it should be handled.

For a drop to be permitted, the drop target must indicate permission during the dragover event. In practice, this means calling preventDefault on the event. If preventDefault is not invoked, the browser will typically reject the drop. The event object provides a dataTransfer property that carries the data being dragged and allows the target to set the desired drop effect, such as copy, move, or link, via dropEffect. The source element can also influence allowed operations through its effectAllowed property.

Common use of dragover involves providing user feedback, such as highlighting the drop target or changing the cursor, and preparing the data for a potential drop. Developers often combine e.preventDefault() with visual indicators and, optionally, set e.dataTransfer.dropEffect to reflect the intended operation. When a drop actually occurs, a separate drop event is fired on the target, at which point the data can be retrieved and processed.

Browser support for dragover is widespread in modern desktop environments. Behavior on touch devices and in specialized security contexts can vary, so developers should test across platforms. Proper handling of dragover is essential for creating intuitive and accessible drag-and-drop interfaces.