drag
Drag Reorder Grid
A controlled dashboard grid reordered by keyboard, with native HTML5 mouse dragging as a desktop accelerator.
- drag
- grid
- dashboard
- keyboard
Live preview
Quick usage
import { DragReorderGrid } from "@pinky-ui/systems";
<DragReorderGrid items={widgets} onReorder={setWidgets} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add drag-reorder-gridPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Every item exposes a labelled handle that moves it with the arrow keys.
- Moves are announced through a live region.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Touch-first surfaces — there is no touch drag path; use Reorderable List or Sortable Chips instead.
Skill
Purpose
Use for controlled two-dimensional panels whose positions can be customized.
Use when
Dashboards, app launchers, or panel layouts have meaningful user order.
Avoid
Large collections where full-list layout animation is expensive or order has no value.
Accessibility
Provide handle labels, arrow movement, live announcements, and stable item identity.
Keyboard and touch
Dragging is implemented with the native HTML5 drag-and-drop API, which does not fire on touch input. On touch devices there is no drag path at all, so the arrow-key handle is the only way to reorder — treat it as the primary interaction and always render a visible move control beside it. This differs from Reorderable List and Sortable Chips, which use Motion's Reorder and do support touch dragging.
Reduced motion and performance
Use transform/layout animation sparingly and avoid per-pointer React state.
Composition and anti-patterns
Use DropIndicator and DragGhost only as parts of an actual drag interaction.