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

Related Articles

Responses

Your email address will not be published. Required fields are marked *