HTML5 Drag and Drop

Drag and drop (Drag and drop) is part of the HTML5 standard.


Drag and Drop

Drag and drop is a common feature where an object is grabbed and then dragged to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.


Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support dragging.

Note: Safari 5.1.2 does not support dragging.


HTML5 drag and drop example

The following example is a simple drag and drop example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML5 Drag and Drop</title>
<style type="text/css">
#div1 {width:300px;height:50px;padding:5px;border:1px solid #aaaaaa;}
</style>
<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>
 
<p>Drag the HelloWorld picture into the rectangle:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/image-6.png" draggable="true" ondragstart="drag(event)" width="300" height="59">
 
</body>
</html>

It might look complicated, but we can study the different parts of the drag and drop event separately.

HTML5 Drag and Drop

Drag the HelloWorld picture into the rectangle:



Make an element draggable

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

<img draggable="true">

What to drag – ondragstart and setData()

Then, specify what happens when the element is dragged.

In the above example, the ondragstart property calls a function, drag(event), which specifies the data being dragged.

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

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

Text is a DOMString representing the type of drag data to add to the drag object.┬áThe value is the id of the draggable element (“drag1”).


Where to put – ondragover

The ondragover event specifies where to place the dragged data.

By default, data/elements cannot be placed into other elements. If we need to set allow placement, we must prevent the default handling of elements.

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

event.preventDefault()

Make a drop – ondrop

The drop event occurs when the dragged data is dropped.

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 avoid browser default handling of data (default behavior of drop event is to open as link)
  • The dragged data is obtained through the dataTransfer.getData(“Text”) method. This method will return whatever data was 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 (target element)