HTML5 Drag & drop Events: In HTML5, drag and drop feature is used to drag and drop an element to a particular location and this drop location can be different applications also. When your dragging an element a translucent represents the element follows the mouse pointer.
HTML5 Drag & drop Events Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Drag and Drop</title>
<script>
function dragStart(e) {
// Sets the operation allowed for a drag source
e.dataTransfer.effectAllowed = "move";// Sets the value and type of the dragged data
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
// Prevent the browser default handling of the data
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
// Cancel this event for everyone else
e.stopPropagation();
e.preventDefault();// Retrieve the dragged data by type
var data = e.dataTransfer.getData("Text");// Append image to the drop box
e.target.appendChild(document.getElementById(data));
}
</script>
<style>
#dropBox {
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 25px;
}
</style>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped image will be inserted here-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>
NOTE: You can drag any element by setting a draggable attribute as true ( draggable=” true”). Hence, most of the web browsers allow text browsers, text selections, images and anchor elements with href attributes are draggable.
HTML5 Drag and Drop Events
While performing drag and drop operations so many events will occur except mouse move events.
| EVENT | DESCRIPTION |
|---|---|
| ondragstart | Fires when the user starts dragging an element. |
| ondragenter | Fires when a draggable element is first moved into a drop listener. |
| ondragover | Fires when the user drags an element over a drop listener. |
| ondreagleave | Fires when the user drags an element out of drop listener. |
| ondrag | Fires when the user drags an element anywhere; fires constantly but can give X and Y coordinates of the mouse cursor. |
| ondrop | Fires when the user drops an element into a drop listener successfully. |
| ondragend | Fires when the drag action is complete, whether it was successful or not. This event is not fired when dragging a file to the browser from the desktop. |
Note: Most of the web browsers support the HTML 5 drag and drop feature.