Project 18, Modern UI

Kanban Board

Plan work in columns and drag cards from To do to Done. Everything saves in your browser, and you can move cards with the keyboard too.

Main API: HTML Drag and Drop
Saves to: localStorage
Dependencies: None
Your browser: Checking

Project board

Drag cards, or focus a card and press the left and right arrow keys to move it. Changes save automatically.

How it works

Start the dragdragstart stores the card id in dataTransfer and dims the card.
Find the spotdragover compares the mouse position with the middle of each card to show where it will land.
Drop and savedrop moves the card in the data, renders the board again and saves it to localStorage.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.dataset.id);
});
column.addEventListener("dragover", (e) => {
  e.preventDefault();                                   // allow dropping
  const after = [...list.children].find((c) => e.clientY < c.getBoundingClientRect().top + c.offsetHeight / 2);
  list.insertBefore(marker, after ?? null);             // show where it lands
});
column.addEventListener("drop", (e) => {
  moveCard(e.dataTransfer.getData("text/plain"), column.dataset.id, indexOf(marker));
});