---
name: kanban
category: data
summary: "Drag & keyboard board moving cards across columns"
subpath: "@42/core/kanban"
deepDoc: docs/llm/kanban.md
---

Drag- and keyboard-driven board: move cards between columns and reorder within
a column.

```html
<div data-c42-kanban>
  <div data-c42-kanban-column data-value="todo" data-label="To do">
    <div data-c42-kanban-list>
      <div data-c42-kanban-item data-value="t1">First task</div>
    </div>
  </div>
  <div data-c42-kanban-column data-value="doing" data-label="In progress">
    <div data-c42-kanban-list></div>
  </div>
</div>
```

```ts
import { Kanban } from '@42/core/kanban';
const board = new Kanban(root);
board.moveItem('t1', 'doing');
board.on('kanban:move', (e) => console.log(e.detail.order));
```

Keyboard (item focused): Up/Down reorder, Home/End jump within column, Left/Right move to the adjacent column. Pointer: drag a card across lists.
Options: `drag` (true), `keyboard` (true)
Methods: `getOrder()`, `moveItem(item, toColumn, toIndex?)`
Events: `kanban:move` → `{ item, from, to, fromIndex, toIndex, order }`