Learn HTML: A Comprehensive Tu…
The Drag and Drop API in HTML5 gives developers a collection of features and events for creating interactive and intuitive drag-and-drop features in web pages and online applications. It has paved the way for a lot of actions we take on a daily basis online. This tutorial is a comprehensive guide to teach you all about HTML drag and Drop.
Having worked as a web developer myself, I can say with confidence that the HTML drag and drop feature is used on a regular basis when developing intuitive web pages.
Before getting into any advanced concepts, let me brief you about what exactly HTML drag and drop is. HTML drag and drop is a user interaction approach that allows you to click and hold an object, move it to a new position, and then drop it there. In the context of HTML, this feature allows for dynamic and interactive user experiences on web pages. It lets users transfer components like photos, text, or files around a web page or between applications conveniently. Now let me move on to the next section and discuss where HTML drag and drop is used.
The HTML drag and drop element is extremely useful. I am sure you have used it multiple times surfing the internet. Let me discuss some of the ways drag and drop HTML5 can be used.
There are many events in the drag section and drop section of the HTML drag and drop. Let me discuss some of the events here down below with you.
Let me share a couple of examples of a program demonstrating HTML drag and drop. This program is used to make a fruit basket. You can drag and drop fruit elements into the fruit basket.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Drag and Drop Example</title>
<style>
.drag-container {
display: flex;
gap: 10px;
}
.drag-item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: grab;
}
.drop-container {
min-height: 200px;
border: 2px dashed gray;
margin-top: 20px;
padding: 10px;
}
.drop-container.active {
border-color: green;
}
</style>
</head>
<body>
<div class="drag-container">
<div class="drag-item" draggable="true" ondragstart="drag(event)">Apple</div>
<div class="drag-item" draggable="true" ondragstart="drag(event)">Orange</div>
<div class="drag-item" draggable="true" ondragstart="drag(event)">Banana</div>
</div>
<div class="drop-container" ondragover="allowDrop(event)" ondrop="drop(event)">
Fruit Basket
</div>
<script>
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.innerText);
}
function allowDrop(event) {
event.preventDefault();
event.target.classList.add('active');
}
function drop(event) {
event.preventDefault();
event.target.classList.remove('active');
var data = event.dataTransfer.getData("text/plain");
event.target.innerHTML += "<div>" + data + "</div>";
}
</script>
</body>
</html>
In the above example, we created a drag-and-drop interface in which you may move the fruits “apple”, ”orange”, and “banana” elements to the "fruits basket." When you drag and drop an object into the drop zone, it creates a new div with the item's text.
In this example, I will show you how you can build a game where you have to segregate the items on the basis of numbers and alphabets.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Drag and Drop Example 2</title>
<style>
body {
font-family: Arial, sans-serif;
}
.drag-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.drag-item1 {
width: 100px;
height: 50px;
background-color: lightblue;
text-align: center;
line-height: 50px;
cursor: grab;}
.drag-item2 {
width: 100px;
height: 50px;
background-color: lightgreen;
text-align: center;
line-height: 50px;
cursor: grab;}
.drop-container {
min-height: 100px;
border: 2px dashed gray;
padding: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<h2> Sorting Game </h2>
<div class="drag-container">
<div class="drag-item1" draggable="true" ondragstart="drag(event)">Item 1</div>
<div class="drag-item1" draggable="true" ondragstart="drag(event)">Item 2</div>
<div class="drag-item1" draggable="true" ondragstart="drag(event)">Item 3</div>
<div class="drag-item2" draggable="true" ondragstart="drag(event)">Item a</div>
<div class="drag-item2" draggable="true" ondragstart="drag(event)">Item b</div>
<div class="drag-item2" draggable="true" ondragstart="drag(event)">Item c</div>
</div>
<div class="drop-container" id="dropZone1" ondragover="allowDrop(event)" ondrop="drop(event, 'dropZone1')">
Drop Zone For Numbers
</div>
<div class="drop-container" id="dropZone2" ondragover="allowDrop(event)" ondrop="drop(event, 'dropZone2')">
Drop Zone For Alphabets
</div>
<script>
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.innerText);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event, dropZoneId) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var droppedItem = document.createElement("div");
droppedItem.textContent = data;
document.getElementById(dropZoneId).appendChild(droppedItem);
}
</script>
</body>
</html>
In the above example,
In conclusion, drag and drop may significantly improve the user experience, making web apps more engaging and efficient, when implemented correctly and with accessibility in mind. Whether you're creating a file management system, a drag-and-drop game, or a workflow tool, HTML drag and drop provides a flexible and user-friendly option for interactive web development. You can also use HTML drag and drop example codepen which is an online open source platform much like GitHub to practice this concept.
If you want to learn more advanced concepts of HTML and web development, I would suggest doing a certified course on web development on the basics of HTML. I would strongly suggest upGrad. Their courses are some of the best in the industry. Their courses are in collaboration with some of the best universities around the world. Some of the best professors in the field curate the courses.
HTML drag and drop allows users to drag and drop components (such as images, text, or files) from one position on a web page to another. It's an easy way to interact with content and move objects naturally.
HTML drag and drop uses a combination of JavaScript and Drag and Drop HTML5 API. First, use the draggable attribute to denote that an element is draggable. When a user begins dragging an element, events such as dragstart, drag, and dragend are triggered. You can then create drop zones by using elements with ondragover and ondrop event handlers to specify where the draggable element can be dropped.
Most recent web browsers enable HTML drag & drop. The list includes.
HTML drag and drop allows you to move photos, text, uploadable files, and custom HTML elements around. We can program the function to accept almost any element type.
Some common uses for HTML drag & drop include rearranging items in a list or grid, uploading files by dragging them to a selected drop zone and creating interactive drag-and-drop games and puzzles.
HTML drag and drop can be made accessible with good implementation. This includes guaranteeing keyboard accessibility and giving alternative solutions for users who are unable to drag and drop with a mouse, such as using buttons or other controls to perform the same tasks.
HTML drag and drop occurs when you click and hold on an object, drag it to a new area, and then release it to drop it there. For example, drag and drop files onto a website's upload box.
Get Free Career Counselling