HTML5 drag-and-drop
May 03, 2021 HTML5
Table of contents
4. HTML5 drag-and-drop instance
5. Set the element to drag-and-drop
6. Drag What - ondragstart and setData()
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.
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
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:
<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:
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:
{ 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:
Place - ondrop
Drop events occur when dragged data is placed.
In the example above, the ondrop property calls a function, drop:
{
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).
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