Purpose:- The purpose of this new html5 concept is to move an object from one location to other by dragging it. This is user interactive and can be use in various website where user has to collect things and put them together in one container.
Working:- This allow the user to click and hold the mouse button over the object, drag it to other location and release.
Events:- Following is the list of events with description of their purpose.
| Events: | Description |
| ondragstart: | Occurs when user starts dragging an object. |
| ondragenter: | Occurs when object enters a valid drop target. |
| ondragleave: | Occurs when user drop the object . |
| ondragover: | Occurs when an object being dragged over a valid drop target |
| ondrop: | Occurs when user drop the object at target after dragging. |
| ondragend: | Occurs when dragging of element finishes. |
Step by step explanation of Drag and Drop events
Draggable Object:- First of all you have to make sure that the object you want drag must have HTML5 draggable attribute applied and its value set to true.
Example:-
<img draggable=”true”>
Dragging:- Then define what should be happen while dragging. This can be done by calling event dragstart and define a function to be executed.
The value and data type of a dragged data have to be set by the dataTransfer.setData() method.
Example:-
function dragThis(i)
{
i.dataTransfer.setData(“box”,i.target.id);
}
Dropping:- Object don’t know where it has to drop itself by default thats why dragover element triggered by handler with information of specific object .
Also you have to stop the default behavior of element using the event.preventDefault() method.
Drop:- This event is occurred when object is dropped at target. for this ondrop event is triggered .
Example of Drag and Drop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 400px;
height: 400px;
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 the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="E:\11.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>