HTML5 Drag and Drop is used to move a image or text to another part of the screen using mouse device. In other words we can say, user selects object by grabbing it and dragging it to a different location. It makes easy to copy and deletion of items using mouse clicks. This allows moving mouse pointer over an object, holding down the left mouse button, dragging it to another location and releasing the button to drop the object there.
Drag and Drop Events
The following are the events which are used during drag and drop operation.
| Events | Description | Syntax |
|---|---|---|
| dragstart | It is used when user starts dragging an element or text selection. | |
| dragenter | It is used when a dragged element or text selection enters valid drop target. | |
| dragover | It is used when a dragged element or text selection is being dragged over a valid drop target. | |
| dragleave | It is used when dragged element or text selection leaves a valid drop target. | |
| drag | It is used to move the object or image on the display screen. | var myDragInstance=new Drag(el,[, options]); |
| drop | it is used on the element where drop occurred at the end of the drag operation. | var myDropInstance=new Drop(el,[, options]); |
| dragend | It is used when user releases mouse button while drag operation is being ended. |
Example for Drag and Drop Element
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
background:grey;
}
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
background:red;
}
</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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Drop Here</div>
<br>
<div id="div2" draggable="true" ondragstart="drag(event)">Drage Me</div>
</body>
</html>
- allowDrop(ev) function is used to prevent the browser default handling of the data by calling preventDefault().
- drag(ev) function is used to move the object or image on the display screen.
- drop(ev) function is used on the element where drop occurred at the end of the drag operation.
- <div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”> tag uses ondrop which is used to move the object and ondragover is used when a dragged element or text selection is being dragged over a valid drop target.
- <div id=”div2″ draggable=”true” ondragstart=”drag(event)”> uses draggable element to make an element draggable and ondragstart element is used when user starts dragging an element or text selection.
Example Application Test
- Save the file as dragdrop_example.html in your system.
- Just open the file in the browser, you will see the video playing in the browser. Note that the browser must support HTML5 specification.
Output
After successful execution of the program you will see following output.
Now drag the element into the bigger rectangle and you would see a result as below:
Previous Tutorial : HTML5 Video and Audio Tags :: Next Tutorial : HTML5 Aside Tag
HTML5 – Video and Audio Tags