Dragend

Dragend is an event in the HTML5 Drag and Drop API. It is fired on the drag source when a drag operation concludes, after the user releases the mouse button or otherwise ends the drag, regardless of whether the item was dropped on a valid drop target. The dragend event signals the end of the drag interaction and allows the origin to reset its visual state and internal data.

The event object is a DragEvent that extends MouseEvent. It provides a dataTransfer property containing the DataTransfer object, which can be used during the drag to carry or query data. It also exposes typical mouse coordinates such as clientX and clientY, which indicate where the drag ended relative to the viewport. In practice, dataTransfer contents are often not preserved by the end of the operation, and some browsers restrict interactions with dataTransfer during dragend for security.

Common use patterns for dragend include cleaning up drag visuals (such as removing drag ghost styling or placeholders), reverting UI to its pre-drag state when a drop did not occur, and updating application state if the drop occurred on a valid target. Because dragend fires in both successful and canceled scenarios, logic that responds to a completed drag should distinguish whether a drop occurred, typically by tracking drop events on targets or by setting a flag on dragstart.

Browser support for the HTML5 Drag and Drop API, including dragend, is broadly available in modern engines (Chrome, Firefox, Edge, Safari). Developers should test drag-and-drop behavior across browsers and devices, as touch environments and some older platforms may differ.