Drag and Drop
6 min read
Make Tasks Draggable
Open js/script.js and update the task element created inside renderTasks().
Add the draggable attribute when each task row is created:
const taskElement = document.createElement("li");
taskElement.className = "task-row";
taskElement.draggable = true;
taskElement.dataset.id = task.id;
This gives every rendered task its own ID and allows the browser to start a drag operation from that row.
Checkpoint
Refresh the app and confirm that a task can be picked up and dragged. Nothing needs to move into a new position yet; that comes next.