Highlight the Drop Zone

A drop target should give the user immediate visual feedback.

The starter stylesheet already includes a visual state for a column with the drag-over class. Your JavaScript only needs to add and remove that class at the right moments.

Because the drop listeners from the previous lesson are attached inside the column loop, add the visual state there too. During dragover, add the class:

column.addEventListener("dragover", (event) => {
  event.preventDefault();
  column.classList.add("drag-over");
});

Remove it when the dragged item leaves the column:

column.addEventListener("dragleave", () => {
  column.classList.remove("drag-over");
});

Also remove it after a successful drop:

column.classList.remove("drag-over");

Be careful with dragleave: the event can fire while moving across children inside a column. For this small project, start with the simple version above and test the behavior before adding extra event logic.

Checkpoint

Start dragging a task and move it over a different column.

The destination should visibly highlight. When the pointer leaves or the task is dropped, the highlight should disappear.

Then retest moving a task and deleting a task to make sure the new drag-and-drop listeners did not break the existing interactions.

Module result: the board now responds to the main task actions. Persistence will be added in a later module.