11.36. HTML5 drag and drop

Drag and drop is part of the HTML5 standard.

Drag the RUNOOB.COM icon into the rectangle.

11.36.1. Drag and drop ¶

Drag and drop is a common feature that grabs an object and then drags it to another location.

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

11.36.2. Browser support ¶

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

Note: Safari 5.1.2 does not support dragging.

11.36.3. HTML5 drag and drop instance ¶

The following example is a simple drag and drop example:

Example ¶

<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title><styletype="text/css">#div1
{width:350px;height:70px;padding:10px;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 RUNOOB.COM
Picture to rectangular box:</p><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><br>
<imgloading="lazy"id="drag1"src="/images/logo.png"draggable="true"ondragstart="drag(event)"width="336"height="69"></body></html>

It may seem a little complicated, but we can look at different parts of the drag-and-drop event separately.

11.36.4. Set the element to be draggable ¶

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

<img draggable="true">

11.36.5. Drag what- `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.

dataTransfer.setData() method to set the data type and value of the data being dragged

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

Text It’s a DOMString represents the type of drag data to add to the drag object. The value is the id (“drag1”) of the draggable element.

11.36.6. Where to put it- `ondragover` ¶

ondragover event specifies where to place the dragged data.

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

This is done by calling the ondragover event’s event.preventDefault() methods:

*event*.preventDefault()

11.36.7. Make placement-ondrop ¶

Occurs when the dragged data is placed drop Events.

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

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

Code interpretation:

Call preventDefault() to avoid the browser’s default handling of data (the default behavior of the drop event is to open as a link)
Pass through dataTransfer.getData("Text") method to get the data being dragged. The method will return in the setData() any data set to the same type in the.
The data being dragged is the id (“drag1”) of the dragged element.
Append the dragged element to the placement element