Focus & interaction

Drag & Drop

Loading…
Part8s typicallandscape · portrait · square

Overview

Grab a page section by its handle, make neighboring rows move as it passes, and settle the new order before confirming it was saved.

Build

  1. 01

    Approach the handle and pause before pickup.

  2. 02

    Change to a grabbing hand; lift the card without moving the hotspot off its handle.

  3. 03

    Move neighboring rows individually as the dragged card crosses them.

  4. 04

    Release, settle into the final slot and move the pointer aside.

Example source React / TSX

examples/focus-drag-and-drop.tsx · Uses the catalog’s shared composition helpers.

Loading source…