In this article, we will learn Web API HTML drag and drop functioning with various methods.
There is the HTML Drag and Drop feature which is used to make user interaction by enabling them to drag some boxes made with any tag and drop them like text and images into the dropping regions that are created on DOM. This can be done by using functionality like Web API HTML Drag and Drop.
Table of Content
We will explore the above-mentioned approaches with the help of suitable examples.
Using HTML5 Drag and Drop Events
- Developed HTML structure and applied the CSS for styling and user-friendly interface.
- Activate the drag-and-drop functionality with ‘draggable=true’.
- Implement the ‘dragStart(event)’ to retain the dragged element’s data.
- Enable the drop with ‘allowDrop(event)‘ for specific targets.
- Now at last Validate the drag-and-drop via ‘drop(event)’ for seamless transfer.
Example 1: In this example, we will see how to drag and drop using Events.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div class="main">
<div id="container">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Using HTML5 Drag and Drop Events</h3>
<div id="drag-container" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>Drop Here</p>
</div>
<div class="draggable" id="draggable1" draggable="true" ondragstart="drag(event)">
Drag me 1
</div>
<div class="draggable" id="draggable2" draggable="true" ondragstart="drag(event)">
Drag me 2
</div>
<div class="draggable" id="draggable3" draggable="true" ondragstart="drag(event)">
Drag me 3
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
CSS
body { display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ffffff;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
} #container { display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
} #drag-container { width: 300px;
height: 150px;
border: 2px dashed #3498db;
margin: 20px;
background-color: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
} .draggable { width: 100px;
height: 50px;
background-color: #3498db;
color: #fff;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin: 10px;
cursor: pointer;
} .main { background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 800px;
} .main:hover { transform: scale(1.05);
} |
Javascript
function allowDrop(event) {
event.preventDefault();
} function drag(event) {
event.dataTransfer.setData("text", event.target.id);
} function drop(event) {
event.preventDefault();
const temp = event.dataTransfer.getData("text");
const dragEle = document.getElementById(temp);
if (event.target.id === "drag-container" && dragEle) {
if (!event.target.contains(dragEle)) {
const clone = dragEle.cloneNode(true);
event.target.appendChild(clone);
dragEle.style.display = "none";
}
} else {
dragEle.style.display = "block";
document.getElementById("drag-container")
.appendChild(dragEle);
}
} |
Output:
Output
Using the HTML5 draggable Attribute and DataTransfer
- Developed the HTML Structure using basic tags and applied suitable styling.
- Enabled elements to be draggable by utilizing the ‘draggable=true’ property.
- Utilized the ‘dragStart(event)’ function to store the data of the dragged elements.
- Enabled the drop functionality by implementing ‘allowDrop(event)‘ for designated targets.
- Utilized the ‘drop(event)’ function to validate the successful execution of drag-and-drop actions.
Example 2: In this example, we will see how to implement drag and drop using the HTML5 draggable Attribute and DataTransfer.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet"
type="text/css"
href="index.css">
</head>
<body>
<div class="main">
<h1>GeeksforGeeks</h1>
<h3>
Approach 2: Using the HTML5 draggable
Attribute and DataTransfer
</h3>
<div class="droppable" ondrop="drop(event)"
ondragover="allowDrop(event)">
Drop here
</div>
<div id="draggable1" class="draggable" draggable="true" ondragstart="dragStart(event)">
Drag Me 1
</div>
<div id="draggable2" class="draggable" draggable="true" ondragstart="dragStart(event)">
Drag Me 2
</div>
<div id="draggable3"
class="draggable" draggable="true" ondragstart="dragStart(event)">
Drag Me 3
</div>
</div>
<script src="index.js"></script>
</body>
</html>
|
CSS
.main { background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: transform 0.2s;
width: 800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
} .main:hover { transform: scale(1.05);
} body { font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
} .draggable { width: 200px;
padding: 10px;
background-color: #f2f2f2;
border: 2px solid #ccc;
text-align: center;
cursor: grab;
transition: transform 0.2s;
position: relative;
} .draggable:active { transform: scale(1.1);
} .droppable { width: 300px;
min-height: 200px;
padding: 10px;
background-color: #e0e0e0;
border: 2px dashed #999;
text-align: center;
position: relative;
} .draggable, .droppable { margin: 10px;
} h1 {
color: green;
} |
Javascript
function dragStart(event) {
event.dataTransfer.setData("text/plain", event.target.id);
} function allowDrop(event) {
event.preventDefault();
} function drop(event) {
event.preventDefault();
var temp = event.dataTransfer.getData("text/plain");
var dragEle = document.getElementById(temp);
var dropEle = event.target;
if (dragEle.classList.contains("draggable") && dropEle.classList.contains("droppable")) {
dropEle.appendChild(dragEle);
} else if (dragEle.classList.contains("draggable") && dropEle === document.body) {
document.body.appendChild(dragEle);
}
} var currEle = null;
document.addEventListener("dragstart", function (e) {
currEle = e.target;
}); document.addEventListener("dragover", function (e) {
e.preventDefault();
}); document.addEventListener("drop", function (e) {
if (currEle && e.target.classList.contains("draggable")) {
var p = currEle.parentNode;
var t = e.target;
var pInd = Array.from(p.children).indexOf(currEle);
var tInd = Array.from(p.children).indexOf(t);
if (p === t.parentNode && pInd >= 0 && tInd >= 0) {
p.insertBefore(t, currEle);
p.insertBefore(currEle, t);
}
}
}); |
Output:
Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API