CodingNic

Drag and Drop

Make Tasks Draggable

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:

javascript
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.