AddThisFeature

Drag-and-Drop Reordering

Let people put things in the order they want.

moderate Data & Content

What it adds

Reorderable lists that persist the new order.

What your agent is told to do

4
  1. 1

    Persist order in a dedicated position column. Do not rely on created_at or id.

  2. 2

    Update the UI optimistically, then persist — and roll back visibly if the save fails.

  3. 3

    Provide a KEYBOARD alternative. Drag-and-drop alone is inaccessible and unusable on some devices.

  4. 4

    Consider fractional or gap-based positions so reordering one item doesn't rewrite every row.

Edge cases it handles

5
  • Two users reordering at once must not corrupt the order — decide on last-write-wins or a conflict strategy.
  • A failed save must visibly revert, not leave a lie on screen.
  • Reordering must work with pagination, or pagination must be disabled for orderable lists.
  • New items must land in a predictable position.
  • Respect prefers-reduced-motion in the drag animation.

Definition of done

7
  • Order persists in a dedicated column and survives reload.
  • There is a full keyboard alternative to dragging.
  • A failed save visibly reverts.
  • Reordering one item doesn't rewrite the whole table.
  • Drag interactions are announced to screen readers.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.