← Blog

Web

A Native-Feeling Admin Dashboard: Tap-to-Edit & Drag Reorder

Bembi PramudyaOct 6, 2026 · 1 min read

Most admin dashboards feel like tax forms. I wanted one that feels like a native app: tap text to edit it, drag rows to reorder them.

Tap-to-edit: tap a name, username, or description — a small modal appears, save, done. No separate form page for small changes.

For manual ordering, each row has a drag handle. It is implemented with Pointer Events (one API for mouse and touch), a ghost element following the finger, and FLIP animation — First, Last, Invert, Play — so other rows glide smoothly as an item moves.

// FLIP: record first position, move DOM, animate the delta
const first = el.getBoundingClientRect();
// ... move the element ...
const last = el.getBoundingClientRect();
el.animate([
  { transform: `translateY(${first.top - last.top}px)` },
  { transform: 'translateY(0)' }
], { duration: 200 });

The full order is sent to the API as an ID array and rewritten in a single database transaction — no half-saved states. On small screens, tables become horizontal scroll so they stay thumb-friendly.