🔧 HTML5 Drag and Drop API 🌐
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
𖣠 HTML5 Drag and Drop API → A Step-by-Step Guide
The HTML5 Drag and Drop API lets you move elements around a webpage using your mouse. This feature is super useful for creating interactive user experiences like file uploads, kanban boards and more! 🖱️💡
🤷🏻♀️ What is Drag and Drop❓
Drag and Drop allows you to grab an element and move it somewhere else on the webpage. You can make any HTML element draggable using draggable="true".
🔥 Quick Summary
1️⃣ Make an item draggable → draggable="true" 🏗️
2️⃣ Detect when dragging starts → dragstart 🎬
3️⃣ Allow dropping → dragover ✅
4️⃣ Move the item → drop 🎯
✨ Step 1: Make an Item Draggable
First, you need an element that can be dragged. Add the draggable="true" attribute to make it draggable.
💁🏻♀️ Example:
<p id="dragItem" draggable="true">Drag me!</p>
👉 Now, this paragraph can be dragged! 🎉
🎬 Step 2: Detect When Dragging Starts
When you start dragging, you need to store some data about the dragged element. This is done using the dragstart event.
💁🏻♀️ Example:
document.getElementById("dragItem").addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id); // Store the ID of the dragged item
});
✅ What happens here?
👉 When dragging starts, the element's ID is saved so we can use it later.
🚦 Step 3: Allow Dropping
By default, elements don't allow dropping. You must enable it using the dragover event.
💁🏻♀️ Example:
document.getElementById("dropArea").addEventListener("dragover", function(event) {
event.preventDefault(); // This allows dropping
});
✅ Why is this needed?
👉 Without event.preventDefault(), the item cannot be dropped inside another element.
➵ 𖦏 Step 4: Handle the Drop
Once the item is dropped, you need to move it inside the drop area.
💁🏻♀️ Example:
document.getElementById("dropArea").addEventListener("drop", function(event) {
event.preventDefault();
let draggedItem = event.dataTransfer.getData("text"); // Get the ID of dragged item
event.target.appendChild(document.getElementById(draggedItem)); // Move it to new place
});
✅ What happens here?
👉 Retrieves the ID of the dragged item and moves it inside the drop area.
🛠️ Step 5: Create a Drop Area
You need a container where the dragged item will be dropped.
💁🏻♀️ Example:
<div id="dropArea" style="width: 200px; height: 200px; border: 2px dashed black;">
Drop Here
</div>
💡 Now, when you drag the item and drop it into this area, it will move inside!
🏆 Complete Example 👇
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag and Drop Example</title>
</head>
<body>
<p id="dragItem" draggable="true">Drag me!</p>
<div id="dropArea" style="width: 200px; height: 200px; border: 2px dashed black;">
Drop Here
</div>
<script>
// Step 2: Dragging starts
document.getElementById("dragItem").addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
});
// Step 3: Allow dropping
document.getElementById("dropArea").addEventListener("dragover", function(event) {
event.preventDefault();
});
// Step 4: Handle the drop
document.getElementById("dropArea").addEventListener("drop", function(event) {
event.preventDefault();
let draggedItem = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(draggedItem));
});
</script>
</body>
</html>
🧠 Understanding dataTransfer.setData()
The dataTransfer.setData(format, data) method is used to store data when dragging an item.
💁🏻♀️ Example:
event.dataTransfer.setData("text", event.target.id);
✅ Explanation:
-
"text" → Data type (could be
"text/plain","text/html", etc.). - event.target.id → Saves the ID of the dragged item to be used later.
🛑 Why preventDefault() is Important?
By default, dropping is not allowed. We use event.preventDefault(); to enable it.
💁🏻♀️ Example:
document.getElementById("dropArea").addEventListener("dragover", function(event) {
event.preventDefault(); // Allows dropping
});
⚡✪ Why do we need it?
- In dragover → Enables dropping.
- In drop → Prevents unwanted browser actions (like opening a file).
👉 Without
preventDefault(), the item won’t be droppable.
✦ Full Flow Recap
📌 Drag starts → setData saves the ID.
📌 Drag over drop area → preventDefault enables dropping.
📌 Drop happens → getData retrieves ID and moves item.
📢 Learn More & Connect with Me!
🤩 Want to see this in action?
Check out my Technical Presentation 🎥:
🔗 View Presentation💼 Let’s connect on LinkedIn! 👥💬
♡ Happy Coding! ♡
...
🔧 HTML5 Drag and Drop API 🌐
📈 42.18 Punkte
🔧 Programmierung
🔧 Drag and Drop in HTML5
📈 37.52 Punkte
🔧 Programmierung
🔧 AI Tool: V0 with drag and drop and tailwindcss
📈 23.98 Punkte
🔧 Programmierung
🔧 Drag and Drop HTML elements and files
📈 23.98 Punkte
🔧 Programmierung
🔧 Curious case of Drag and Drop
📈 22.85 Punkte
🔧 Programmierung