Input & controls

Drag to Reorder

Q: How do people describe a Drag to Reorder in plain words?

grab a row and drag it to a new place in the list long-press, lift, and other items make room those six little dots that mean I can reorder

Q: How do I implement a Drag to Reorder?

Implement drag-to-reorder with pointer events (not HTML5 DnD): ⠿ handle per row, 200ms long-press on touch, lifted styles, animated gap, keyboard Space/arrow support, and persist the new order.

Drag list items to a new order while siblings make room—order is what you see.

Also known as reorder list · drag handle list · manual sort

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Drag to Reorder".

Implement drag-to-reorder with pointer events (not HTML5 DnD): ⠿ handle per row, 200ms long-press on touch, lifted styles, animated gap, keyboard Space/arrow support, and persist the new order.

Anatomy:
- drag handle: The ⠿ control—whole-row drag fights scroll and selection.
- lifted state: Shadow, slight scale, dim—signals “off the ground.”
- placeholder: Empty slot where the item left; others animate aside.
- drop indicator: Clear line for the landing index.

Preferred API / pattern: `dnd-kit / @hello-pangea/dnd`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: HTML5 DnD on mobile
○Avoid: Whole row is the drag target
○Avoid: No keyboard reorder
○Avoid: No live region announcing new position for AT users.

In plain wordsHow people search for it

“grab a row and drag it to a new place in the list”“long-press, lift, and other items make room”“those six little dots that mean I can reorder”

AnatomyOpen for part names

drag handle: The ⠿ control—whole-row drag fights scroll and selection.
lifted state: Shadow, slight scale, dim—signals “off the ground.”
placeholder: Empty slot where the item left; others animate aside.
drop indicator: Clear line for the landing index.

How to write itOpen for stack patterns

Web (HTML/CSS)Pointer events + transform (avoid HTML5 DnD for sort)

React + Tailwind + shadcn/uidnd-kit / @hello-pangea/dnd

SwiftUIonMove in List / .draggable

Ant DesignTable drag handlers / custom dnd-kit

Notes

HTML5 Drag and Drop is a poor fit for reorder (ghost image, weak mobile). Pointer-based libs win. On touch, long-press ~200ms before lift so scroll still works. Keyboard path is required: focus handle, Space to lift, arrows to move, Space to drop.

Common mistakesHumans and models trip here

HTML5 DnD on mobile: no drag events—dead end.
Whole row is the drag target: scroll becomes accidental lift—use a handle or long-press.
No keyboard reorder: fails a11y.
No live region announcing new position for AT users.

More failure symptoms on AI broke it.

Related patterns

Swipe Actions / Swipe CellHorizontal swipe on a list row reveals hidden actions—standard mobile list gesture.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Tree ViewA hierarchical list where nodes expand and collapse to reveal children.Data TableA grid of rows and columns for comparing structured records.

Spotted a wrong name or missing pattern?

Message on X