logo svelte /motion v2.10.0
FIG-001/ BOARD

drag between columns.

A three-column kanban board. Drag a card sideways into another column and it joins that column mid-gesture: the cards there spring apart to make room, and the drag carries on so you can still pick its slot.

  • Reorder.Board wraps ordinary Reorder.Groups and renders no element. When a card's centre crosses into another column, the column it left calls onReorder without it and the column it joins calls onReorder with it.
  • All three columns live in one $state record, and each column writes only its own key, so the two onReorder calls never overwrite each other. Card titles are unique across the board.
  • Each column scrolls when its cards outgrow it. Hold a dragged card near a column's top or bottom edge and that column auto-scrolls beneath it.
  • Tab to a card and press Space to grab it. Up and Down move it within its column, Left and Right carry it to the next column, and Escape puts it back where it was grabbed.
↩ all examples
pattern · reorder-board mode · live running source
To do 7
  • Sketch the board
  • Pick a palette
  • Write the copy
  • Plan the launch
  • Book a review
  • Draft the FAQ
  • Order stickers
Doing 2
  • Port the drag
  • Measure columns
Done 1
  • Ship the list
category · board
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ LIMIT

refuse a move with canMove.

The Doing column holds at most three cards. Once it is full, a card dragged over it stays in its own column — canMove refuses the move before either column changes.

  • canMove(card, from, to) runs before either column's onReorder. Here it compares to with the Doing column's array and refuses once that column holds three cards.
  • A refused card simply stays in its column until it's dragged over one that accepts it. Reordering inside the full column still works.
  • canMove runs every frame while a card hovers a full column, so keep it a cheap check with no side effects. Escape ignores it and always restores the grab.
↩ all examples
canMove · wip ≤ 3 mode · live running source
To do 4
  • Sketch the board
  • Pick a palette
  • Write the copy
  • Plan the launch
Doing 2/3 WIP limit 3
  • Port the drag
  • Measure columns
Done 1
  • Ship the list
category · limit
sheet · sheet 02 / 02
⟳ to re-run

Reorder.Board