Layout · Drag & drop preview

Sortable list

A drag-to-reorder card list with a dedicated handle. Pointer, touch, and full keyboard dragging (Space to lift, arrows to move, Escape to cancel) with polite screen-reader announcements. Presentational — it hands the new order back; the app persists it.

Card

Design the empty stateDesign · due Fri
Wire the reorder APIBackend · due Mon
Keyboard-drag QA passA11y · due Tue
Rewrite onboarding copyContent · due Wed

Grab the handle (pointer or touch), or Tab to it and press Space, then use the arrow keys.

Sortable grid

The same reorder engine on a responsive, mobile-first grid (1 → 2 → 3 columns). The whole card is the drag target here. Reorders animate; reduced-motion collapses the motion.

Card
CardHeader
CardTitle
CardContent
Badge

Inbox12
Drag anywhere on the card to rearrange the board.
Triage5
Drag anywhere on the card to rearrange the board.
In progress3
Drag anywhere on the card to rearrange the board.
In review7
Drag anywhere on the card to rearrange the board.
Done24
Drag anywhere on the card to rearrange the board.
Archive91
Drag anywhere on the card to rearrange the board.

Resizable dashboard grid

Cards drag to rearrange AND resize from the bottom-right grip (drag, or focus it and use the arrow keys). The grid drops columns as it narrows so it stays usable on a phone. The full layout is exposed for the app to serialize and restore.

Card
CardHeader
CardDescription
CardContent

Revenue
$48.2k
+12.4% vs last week
Active users
2,318
+4.1% vs last week
Growth
18.9%
+2.0pt vs last week
p95 latency
148ms
-9.0% vs last week

Serialized layout (persist this):

{
  "revenue": {
    "colSpan": 2,
    "rowSpan": 2
  },
  "users": {
    "colSpan": 1,
    "rowSpan": 1
  },
  "growth": {
    "colSpan": 1,
    "rowSpan": 1
  },
  "latency": {
    "colSpan": 2,
    "rowSpan": 1
  }
}