Drag State Board
A kanban board frozen mid drag with a dashed pickup ghost, a tilted lifted card over an insertion indicator, and a move status line.
A kanban board frozen mid drag with a dashed pickup ghost, a tilted lifted card over an insertion indicator, and a move status line.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Drag State Board is the Acme sprint board captured in the middle of a drag: the card ACM-294 is being pulled from In Progress into Review. The source column keeps a dashed ghost where the card was picked up, the moving card renders lifted with a slight tilt and a primary ring inside the target column, and an insertion indicator marks exactly where it will land. A status pill in the header names the move and a footer line spells out the keyboard hints.
The board is three const arrays for the static columns plus a single dragged card object reused in both the ghost and the lifted tile, so the pickup source and the in transit card always read the same title and id. The target column takes a primary tint and a count that shows its live total plus one, the visual language a drag layer needs to feel anchored.
Reach for this block when you are documenting or demoing drag behavior on a board, or building the drag layer itself and need a static reference for the pickup, transit, and drop states. Wire it to your drag and drop handlers and swap the dragged card for the live selection.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the sprint board mid move. Other drag states:
Tip: keep the pickup ghost and the lifted card visually linked; a viewer should read them as one card in two places, never as two cards.