Drag and Drop part in HTML5
Drag and drop is a part of the HTML5 standard. Just about any element can be made draggable.
To make an element draggable, all that’s required is to set its draggable attribute to true:
<img draggable="true" />
Dragging something, though, isn’t much use by itself. To employ a draggable object to achieve something useful, you’re probably going to want to be able to drop it somewhere.
To define where an object can be dropped, and control the dragging and dropping process, you need to write event listeners to detect and control the various parts of the drag-and-drop process.
There are a few different events you can utilize to control your drag and drop:
- dragstart
- drag
- dragenter
- dragleave
- dragover
- drop
- dragend
To control your drag and drop, you need to define a source element (where the drag starts), the data payload (what it is you’re dragging), and a drop target (an area to catch the dropped item).
Not all items can be drop targets—an <img>, for example, cannot accept drops.
The dataTransfer property contains a piece of data sent in a drag action. The value of dataTransfer is usually set in the dragstart event and read/handled in the drop event.
Calling setData(format, data) or getData(format, data) will (respectively) set or read this piece of data.
Try it Yourself: Drag and Drop in HTML5
You’re going to build a demonstrator for the HTML5 drag-and-drop interface. Fire up your editor and create a file containing the code below
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Drag and Drop</title>
<style>
body {background-color: #ddd; font-family: arial, verdana, sansserif;}
#drop1 {width: 200px;height: 200px;border: 1px solid
black;background-color:white}
#drag1 {width: 50px;height: 50px;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
window.onload = function() {
var dragged = document.getElementById("drag1");
var drophere = document.getElementById("drop1");
dragged.ondragstart = drag;
drophere.ondragover = allowDrop;
drophere.ondrop = drop;
}
</script>
</head>
<body>
<div id="drop1" ></div>
<p>Drag the image below into the box above:</p>
<img id="drag1" src="drag.gif" draggable="true" />
</body>
</html>
To get the party started, you define a couple of HTML elements on your page. The <div> element with ID of drop1 is the target area for catching the drop, and the image with ID of drag1 is to become your draggable item.
Three important functions are defined in the code. Each of these functions is passed the current event to process. Behind the scenes, ev.target changes automatically for each type of event, depending on where you are in the drag-anddrop process:
- A function named drag(ev) is executed when the drag starts. This function sets the value of the dataTransfer property for the drag to the ID of the dragged object:
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
- Another function named allowDrop(ev) is executed when the drag passes over the intended drop area. All that this function must achieve is to prevent the drop area’s default behavior from taking place (as the default behavior prevents dropping):
function allowDrop(ev) {
ev.preventDefault();
}
- Finally, a function named drop(ev) is executed when the dragged item is dropped. In this function, the value of the dataTransfer property is read to determine the ID of the dragged object; then that object is appended as a child object to the drop area object. Once again, the default operation needs to be prevented from taking place:
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
The loaded page should look something like the one shown in below snapshot; dragging the small image and dropping it over the white drop area, you should see it “dock” into the <div> element, as shown in the figure.
