80Build a drag-and-drop Kanban board

Build a Kanban board with the native HTML Drag and Drop API.

The board state is normalised:

{
  columns: [{ id: "todo", title: "To do", cardIds: ["c1", "c2"] }, …],
  cards: { c1: { id: "c1", title: "Design" }, … },
}

1. Write a pure function moveCard(board, cardId, toColumnId, toIndex) that returns a new board with the card removed from its column and inserted into toColumnId at toIndex. Moving within the same column must account for the card's own removal.
2. Build <KanbanBoard initialBoard={board} onChange={fn} />:
   • each column is <section data-column-id={id}> with an <h2> title and a list of cards;
   • each card is <article draggable="true" data-card-id={id}>;
   • dropping a card on another card inserts it before that card; dropping on a column's empty area appends it;
   • for keyboard and screen reader users, each card also has Move left and Move right buttons (aria-label="Move {title} left") that move it to the end of the neighbouring column;
   • call onChange(board) after every move.