HTML Drag & Drop API

In HTML, any element can be dragged and dropped.

 

Drag and drop

Drag and drop is a very popular feature. It's when you "grab" an object and drag it to another location. Users can select draggable elements with the mouse, drag those elements onto the draggable element, and release them by releasing the mouse button. A transparent image of the draggable elements follows the cursor during the drag process.

Browser support

The numbers in the table indicate the first browser version to fully support drag-and-drop functionality.

API Drag and Drop	Google Chrome	MS Edge	Firefox	Safari	Opera
	4.0	9.0	3.5	6.0	12.0

Examples of drag and drop in HTML.

Here's an example of simple drag and drop:

It might seem complicated, but consider all the different parts of a drag-and-drop event.

Create a draggable element.

First, to make an element draggable, set the property draggableto true:

 

Specify what data is being pulled - ondragstart and setData()

Next, specify what will happen when the element is dragged.

In the example above, the property ondragstartcalls the function drag(event), specifying which data will be pulled.

The method dataTransfer.setData()sets the data type and value of the data being pulled:

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }

In this case, the data type is "text" and the value is the ID of the draggable element ("drag1").

Where to drop it - ondragover

The event ondragoverspecifies where the dragged data can be dropped.

By default, it's not possible to drop data or elements into other elements. To enable dropping, the element's default handling must be disabled.

This is done by calling the method event.preventDefault()for the event ondragover:

event.preventDefault()

Perform an ondrop.

When data is dragged and dropped, a drop event occurs.

In the example above, the property ondropcalls the function,   drop(event):

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

The code is explained as follows:

1. Call this PreventDefault()to prevent the browser from processing the data by default (the default is to open it as a link when dropped).
2. Retrieve the data pulled using the method dataTransfer.getData(). This method will return any data set to the same type as in the method.setData()
3. The data being dragged is the ID of the element being dragged ("drag1").
4. Connect the dragged element to the dropped element.