HTML5 Drag and Drop

Please drag the CodeW3C.com image into the rectangle.

Drag and Drop

Drag and Drop (Drag and Drop) is a very common feature. It refers to grabbing something and dragging it to a different location.

Drag and drop is part of the HTML5 standard: any element is draggable.

Browser Support

The numbers in the table indicate the first browser version that fully supports drag and drop.

API
Drag and Drop 4.0 9.0 3.5 6.0 12.0

HTML Drag and Drop Example

The following is a simple example of drag and drop:

Example

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();

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

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

</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Try It Yourself

It may look a bit complex, but let's study all the different parts of the drag and drop events.

Set an element as draggable

Firstly: To make an element draggable, set the draggable attribute to true:

<img draggable="true">

Drag and Drop Content - ondragstart and setData()

Then, specify what happens when the element is dragged.

In the above example, the ondragstart attribute calls a drag(event) function to specify what data to drag.

The setData() method of dataTransfer sets the data type and value of the dragged data:

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

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

Where to Drop - ondragover

The ondragover event specifies where the draggable data can be dropped.

By default, data/elements cannot be dropped into other elements. To implement drag and drop, we must prevent the element from handling this default behavior.

This task is completed by the event.preventDefault() method of the ondragover event:

event.preventDefault()

Performing Drop - ondrop

A drop event occurs when the dragged data is released.

In the above example, the ondrop attribute calls a function, drop(event):

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

Code Explanation:

  • Call preventDefault() to prevent the browser's default handling of the data (the default behavior of the drop event is to open as a link)
  • Get the dragged data through the dataTransfer.getData() method. This method will return any data set to the same type in the setData() method
  • The dragged data is the id of the dragged element ("drag1")
  • Append the dragged element to the drop element

More Examples

Drag and Drop Images

How to drag and drop an image between two <div> elements:

Please drag the CodeW3C.com image into the rectangle.

Try It Yourself