Hey, I am Ajink, and today in this blog, we’re going to build a to-do list with drag-and-drop functionality using HTML, CSS, and JavaScript. Drag-and-drop makes task management easier and more interactive.
HTML Code: create a index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Drag-and-Drop To-Do List</title>
</head>
<body>
<div class="todo-container">
<div class="todo-list" id="todo-list" ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="task" draggable="true" ondragstart="drag(event)">
<span>Task 1</span>
</div>
<div class="task" draggable="true" ondragstart="drag(event)">
<span>Task 2</span>
</div>
<!-- Add more tasks as needed -->
</div>
<div class="done-list" id="done-list" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- Completed tasks will go here -->
</div>
</div>
<script defer src="script.js"></script>
</body>
</html>
HTML Code Explanation:
- We have a basic HTML structure with a container div, a to-do list div, and a completed tasks div.
- Tasks are draggable (
draggable="true") and have drag and drop event attributes.
CSS Code: create style.css
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.todo-container {
display: flex;
}
.todo-list,
.done-list {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 20px;
margin: 20px;
min-height: 300px;
}
.task {
background-color: #3498db;
color: #fff;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
cursor: pointer;
}
.done-task {
background-color: #2ecc71;
}
CSS Code Explanation:
- The CSS provides styling for the to-do list and completed tasks, including colors, shadows, and spacing.
JavaScript Code : create script.js
function drag(event) {
event.dataTransfer.setData("text", event.target.innerText);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
const data = event.dataTransfer.getData("text");
const taskElement = document.createElement("div");
taskElement.classList.add("task");
taskElement.innerText = data;
const doneList = event.target.id === "done-list" ? event.target : event.target.closest(".done-list");
const todoList = event.target.id === "todo-list" ? event.target : event.target.closest(".todo-list");
if (doneList) {
taskElement.classList.add("done-task");
doneList.appendChild(taskElement);
} else if (todoList) {
todoList.appendChild(taskElement);
}
}
JavaScript Code Explanation:
- The JavaScript code includes functions for dragging and dropping tasks.
dragis called when a task is dragged, setting the data to be transferred.allowDropprevents the default behavior of dropping.dropis called when a task is dropped, creating a new task element and appending it to the appropriate list.
Conclusion:
In this blog, we successfully built a to-do list with drag-and-drop functionality using HTML, CSS, and JavaScript. Drag-and-drop makes managing tasks a breeze. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.
Thanks for reading, and if you have any doubts, feel free to comment
