Posts in current category

HTML5 drag-and-drop


May 03, 2021 13:05 HTML5


Table of contents


HTML5 Drag and Drop


The purpose of drag-and-drop is to allow you to place an object where you want to place it.

Drag and drop are part of the HTML5 standard.


HTML5 drag-and-drop

Drag the w3cschool icon into the rectangular box.


Drag and drop

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

In HTML5, drag-and-drop is part of the standard, and any element can drag-and-drop.


Browser support

HTML5 drag-and-drop HTML5 drag-and-drop HTML5 drag-and-drop HTML5 drag-and-drop HTML5 drag-and-drop

Internet Explorer 9 Plus, Firefox, Opera, Chrome, and Safari support drag.

Note: Safari 5.1.2 does not support drag.


HTML5 drag-and-drop instance

The following example is a simple drag-and-drop example:

Instance

<!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 out . . .

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


Set the element to drag-and-drop

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

<img draggable="true">

Drag What - ondragstart and setData()

Then, specify what happens when an element is dragged.

In the example above, the ondragstart property calls a function, drag, 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);
}

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

Tip: You can learn more about the "ondragstart event" section of this site!


Where to put it - ondragover

The 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 processing of elements.

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

event .preventDefault()


Place - ondrop

Drop events occur when dragged data is placed.

In the example above, the ondrop property calls a function, drop:

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 drop events is open as a link)
  • DataTransfer.getData ("Text") method is used to obtain the data being dragged. The method returns any data that is 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).


HTML5 drag-and-drop

More instances

Drag and drop pictures back and forth
How to drag and drop an image between two elements.


Related articles

HTML DOM Reference Manual: Ondrop Events