The Board Model and Native Drag-and-Drop
AnyTool Kanban Board keeps a single board object as its source of truth: a board has a name and an ordered list of columns, each column has a title, an optional WIP limit and an ordered array of cards, and each card carries a title, description, colour label, due date, priority and an optional checklist count. Reordering a card and moving it between columns are the same operation — splice it out of its source column’s array and insert it into the target column’s array at a computed index — so the data structure stays consistent. Drag-and-drop is implemented with the browser’s native HTML5 Drag and Drop API and no external library: on dragstart the dragged card’s id and source column are stashed in a ref, cards and column bodies are drop targets whose dragover handlers call preventDefault() (which is what makes a drop possible) and compute an insertion index from the cursor position, a thin accent-coloured line previews exactly where the card will land, and drop performs the splice. Columns themselves are draggable by the grip in their header to reorder the lists. For touch and pointer-limited contexts, each card also exposes left/right arrows that move it to the adjacent column and a column menu that can move the whole list, so the board is fully usable without dragging.
- Board → columns → cards, each an ordered array; the whole object is the source of truth
- Reordering and cross-column moves are one splice-out / splice-in operation
- Native HTML5 Drag and Drop API — dragover preventDefault() enables the drop; no DnD library
- A live drop indicator line shows the exact insertion point as you hover
- Arrow buttons and a column menu provide a no-drag fallback for touch devices
