Web API HTML Drag and Drop
Last Updated :
01 Aug, 2024
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.
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>
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);
}
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:
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>
.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;
}
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
Similar Reads
HTML Drag and Drop Drag and Drop is a very interactive and user-friendly concept that makes it easier to move an object to a different location by grabbing it. This allows the user to click and hold the mouse button over an element, drag it to another location, and release the mouse button to drop the element there. W
5 min read
What is Drag and Drop? Websites and other applications use drag-and-drop because it enables us to select and copy text, images, and other documents on the computer. In this article, we will understand How Drag and Drop Works. What is Drag and Drop?The drag-and-drop feature is provided in every operating system by default.
4 min read
How to Drag and Drop Images using HTML5 ? In this article, we will see how to create a drag and drop functionality using HTML5. Approach: The following approach will be implemented to Drag and Drop Images using HTML5. We have given a rectangle area and an image, the task is to drag the image and drop it into the rectangle.We have to enable
2 min read
script.aculo.us Drag & Drop The DragDrop module can be used to make any element draggable or then it can be dropped in a drop zone. Making An element Draggable: Draggable elements can be made by making a draggable instance and then identifying the element to be made draggable Syntax: new Draggable( element_id, {options} ); Dra
3 min read
Angular PrimeNG Drag and Drop to Table Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see how to use the Drag and Drop to Table in Angular PrimeNG. Angular PrimeNG Drag and Drop
5 min read