HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.

The user may selectdraggable elements with a mouse, drag those elements to adroppable element, and drop them by releasing the mouse button. A translucent representation of thedraggable elements follows the pointer during the drag operation.

You can customize which elements can becomedraggable, the type of feedback thedraggable elements produce, and thedroppable elements.

This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.

Concepts and usage

On the surface, Drag and Drop actually has three distinct use cases:dragging elements within a page, dragging data out of a page, anddragging data into a page. They have subtly different requirements and implementations. However, the Drag and Drop API provides a unified model to think about all these interactions.

At its core, a drag operation involves three things:

• Theitem being dragged
• Theunderlying data to be transferred
• Thedrop target

It's not necessarily true that all three are under your control, or you need to define them yourself:

• When dragging external data into a page, there's no draggable item to be defined (for example, it could be a file in the operating system's file explorer).
• When dragging elements within a page, you often don't need to define any transferred data; you just manipulate the dragged element.
• When dragging out of the page, there's no drop target to be defined.

We'll look at how each one can be defined and used.

Drag events

HTML drag-and-drop uses theDOM event model anddrag events inherited frommouse events. During drag operations, several event types are fired, and some events might fire many times, such as thedrag anddragover events.

For more information, seeDrag operations.

Draggable items

In HTML, images, links, and selections are draggable by default. To make an arbitrary element draggable, set thedraggable attribute to the value"true".

<p draggable="true">This element is draggable.</p>

At this point, the element already has the dragging appearance, although it has no behavior defined yet:

For images and links,draggable defaults totrue, so you would only set it tofalse to disable dragging of these elements. For non-draggable elements, the "dragging" gesture usually selects the text instead.

A selection is also draggable. In this case, thesource node, or the node on which various events such asdragstart anddragend are fired, is the text node that the drag started on. The selection can partially or fully contain multiple nodes, including text nodes and element nodes, which are all considered dragged simultaneously.

As aforementioned, the dragged item can also be something not on a webpage—for example, a file in the operating system's file explorer. However, only items on the webpage can cause thedragstart anddragend events to fire.

For more information, see theDrag operations guide.

Drag data store

You can't transfer JavaScript objects directly to arbitrary webpages, and surely not to external applications, so to transfer data in and out of the webpage, the data must be serialized to a string (or as aFile). In drag and drop, this string is encapsulated in aDataTransferItem object, which also defines a particulartype—typically a MIME type such astext/html—that defines how the string should be interpreted.

Each drag and drop operation has an associateddrag data store, which is aDataTransfer object accessible via theDragEvent'sdataTransfer property. For the default-draggable items such as images, links, and selections, the drag data is already defined by the browser; for custom draggable elements defined using thedraggable attribute, you must define the drag data yourself. The only time to make any modifications to the data store is within thedragstart handler—for thedataTransfer of any other drag event, the data store is unmodifiable.

ThesetData() method can be used to add an item to the drag data, as shown in the following example.

function dragstartHandler(ev) {  // Add different types of drag data  ev.dataTransfer.setData("text/plain", ev.target.innerText);  ev.dataTransfer.setData("text/html", ev.target.outerHTML);  ev.dataTransfer.setData(    "text/uri-list",    ev.target.ownerDocument.location.href,  );}const p1 = document.getElementById("p1");p1.addEventListener("dragstart", dragstartHandler);

Furthermore, the only time you canread from the data store, apart from thedragstart event, is during thedrop event (allowing the drop target to retrieve the data). For all other events, the data store cannot be accessed.

For more information, readWorking with the drag data store.

Drop target

Adrop target is an element on which a user can drop a dragged item. By default, most elements are not drop targets, and if you release the drag, a "fly-black" animation displays, indicating that the drag and drop failed. Any element can become a drop target by canceling thedragover event that fires on it withpreventDefault().

Thedrop event only fires on drop targets, and it is the only time you can read the drag data store.

The following example shows a minimal valid drop target, and also combines the code from the previous examples.

<p>Drop Zone</p>

const target = document.getElementById("target");// Cancel dragover so that drop can firetarget.addEventListener("dragover", (ev) => {  ev.preventDefault();});target.addEventListener("drop", (ev) => {  ev.preventDefault();  const data = ev.dataTransfer.getData("text/plain");  ev.target.append(data);});

For more information, seeSpecifying drop targets.

Guides

Drag operations

Describes the steps that occur during a drag and drop operation, and what the application is supposed to do within each handler.

Working with the drag data store

Describes how to read and write to the drag data store during a drag and drop operation.

File drag and drop

A hands-on guide implementing a basic interface accepting file drops.

Kanban board with drag and drop

A hands-on guide implementing a Kanban board involving dragging and dropping elements within a webpage.

Interfaces

DragEvent

The event object passed to drag event handlers.

DataTransfer

Holds any data transferred between contexts, consisting of text items and file items. Initially designed for drag and drop, it is now also used in other contexts such asClipboard API.

DataTransferItem

Represents one item in the drag data store, which can be a text item or a file item.

DataTransferItemList

Represents the list ofDataTransferItem objects in the drag data store.

Examples

• Copying and moving elements with theDataTransfer interface
• Copying and moving elements with theDataTransferListItem interface

Reference pages for each interface also have individual examples.

Specifications

See also

• Drag Operations
• Working with the drag data store
• HTML Living Standard: Drag and Drop
• Drag and Drop interoperability data from CanIUse