What is Drag and Drop ?
Drag and Drop (DnD) is a feature in HTML5, enables our applications to use drag-and-drop features in browsers.
Drag and drop is a very common powerful feature. It is when you “grab” an object and drag it to a different location.
Its used to copy, reorder and delete items with the help of mouse.
Drag and drop is possible even in HTML4, but we need to use Javascript frameworks or better programming skills to achieve it.
Why drag and drop is required ?
Drag and Drop functionality is used in Whatever application requires the object to be moved from one location to another location
This is mostly used in app web applications.
How Drag and Drop works ?
The main functionality is moving the object/element from one location to another location inside the webpage.
We can hold the mouse button down over an element and drag it to another location.
And If we want to drop the element there, just release the mouse button.
HTML 5 have Drag and Drop (DnD) API support which is used to “grab” an object and drag it to a different location.
HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
Drag Events
HTML DOM event model is used to drag events inherited from mouse events.
Drag operation starts when the user selects a draggable element,
Then drags the element to a droppable element, and finally releases the dragged element.
Each drag event type has an associated global event handler:
| 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: Neither ondragstart nor ondragend events are fired when dragging a file into the browser from the OS.
What are the elements can be dragged and dropped ?
We can drag various types of elements, including but not limited to files, links, images and text.
We may also drag multiple elements at once. (It’s recommended to have them all the elements in same format for consistency)
We can also drag Form elements which accepts user input can be droppable areas by default.
Example :
<!DOCTYPE HTML>
<html>
<head>
<style>
#box1, #box2 {
float: left;
width: 220px;
height: 220px;
margin: 20px;
padding: 20px;
border: 2px solid red;
}
</style>
<script>
function allowDropThis(i) {
i.preventDefault();
}
function dragThis(i) {
i.dataTransfer.setData("image", i.target.id);
}
function dropThis(i) {
i.preventDefault();
var data = i.dataTransfer.getData("image");
i.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag Image between these the two elements.</p>
<div id="box1" ondrop="dropThis(event)" ondragover="allowDropThis(event)">
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png" draggable="true" ondragstart="dragThis(event)" id="drag1" width="220" height="220">
</div>
<div id="box2" ondrop="dropThis(event)" ondragover="allowDropThis(event)"></div>
</body>
</html>
Output :
Before Dragging
After Dragging
