W3cubDocs

/Web APIs

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.

Event UIEvent MouseEvent DragEvent

Instance 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.

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.

Example

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DragEvent 46 12 3.5 No 12 14 No No 4 No No No
DragEvent 46 12 3.5
9Before Internet Explorer 10, DragEvent is exposed in standards mode but not quirks mode.
12 14 No No 4 No No No
dataTransfer 46 12 3.5
10The value is always null.
33 14 No No 4 No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DragEvent