Acme / prototype / interaction

Sidebar drag-to-reorder

Throwaway HTML so we can feel the reorder before porting it to React. Native dragstart / dragover / drop, ~40 lines of JS, no libraries. Grab a row by the dots and move it.

Order persists in the DOM only — refresh to reset.

What you're feeling

Design decisions baked into this prototype, so you can push back on them.

  • Drop indicator snaps to the nearest gap, not the raw cursor Y. It only moves when you cross a row's midpoint — feels more decisive, less jittery.
  • Dragged row stays in place at 35% opacity with a 2° tilt. Keeping the ghost in the list preserves your sense of where you started; the tilt reads as "lifted."
  • Grip dots are the affordance, but the whole row is draggable. Dots darken on hover to teach the gesture without forcing a tiny hit target.
  • No auto-scroll, no drop animation. Left out on purpose so the core feel is easy to judge — say the word and we add them next.

Open questions

  1. Should Trash (and maybe Archive) be pinned to the bottom and excluded from reordering?
  2. Do we want rows to slide to their new slot on drop, or is the instant snap acceptable?
  3. Keyboard path: is Alt + Arrow to move the focused row enough for the first ship?