Build a to-do list with drag-and-drop functionality for easy task management.

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.
  • drag is called when a task is dragged, setting the data to be transferred.
  • allowDrop prevents the default behavior of dropping.
  • drop is 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

Ajink Gupta
Ajink Gupta
Articles: 38