Web/API/DragEvent

The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

This interface inherits properties from MouseEvent and Event.

Properties

DragEvent.dataTransfer Read only: The data that is transferred during a drag and drop interaction.

Constructors

Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since DataTransfer objects have a processing and security model that is coordinated by the browser during drag-and-drops.

DragEvent(): Creates a synthetic and untrusted DragEvent.

Event types

drag: This event is fired when an element or text selection is being dragged.
dragend: This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
dragenter: This event is fired when a dragged element or text selection enters a valid drop target.
dragexit: This event is fired when an element is no longer the drag operation's immediate selection target.
dragleave: This event is fired when a dragged element or text selection leaves a valid drop target.
dragover: This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than mouseover ).
dragstart: This event is fired when the user starts dragging an element or text selection.
drop: This event is fired when an element or text selection is dropped on a valid drop target.

GlobalEventHandlers

GlobalEventHandlers.ondrag: A global event handler for the drag event.
GlobalEventHandlers.ondragend: A global event handler for the dragend event.
GlobalEventHandlers.ondragenter: A global event handler for the dragenter event.
GlobalEventHandlers.ondragexit: A global event handler for the dragexit event.
GlobalEventHandlers.ondragleave: A global event handler for the dragleave event.
GlobalEventHandlers.ondragover: A global event handler for the dragover event.
GlobalEventHandlers.ondragstart: A global event handler for the dragstart event.
GlobalEventHandlers.ondrop: A global event handler for the drop event.

Example

An Example of each property, constructor, event type and global event handlers is included in their respective reference page.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'DragEvent' in that specification.	Living Standard
HTML 5.1The definition of 'DragEvent' in that specification.	Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DragEvent`	Chrome Full support 3	Edge Full support 12	Firefox Full support 3.5	IE Full support 10	Opera Full support 12	Safari Full support 3.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 4	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`DragEvent()` constructor	Chrome Full support 46	Edge Full support 12	Firefox Full support 3.5	IE Full support 10	Opera Full support 12	Safari Full support 3.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`dataTransfer`	Chrome Full support 46	Edge Full support 12	Firefox Full support 3.5	IE Full support 10	Opera Full support Yes	Safari Full support 3.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support