Drag overlay

A drag overlay is a floating preview that follows the pointer while the original element keeps its place in the layout. It avoids clipping and reflow during a drag.

You'll learn

—When a drag overlay helps over moving the element in place.
—How to render an overlay for the active draggable.

Why an overlay

Moving the element itself works for simple cases, but a dragged element inside a scrollable or clipped container can be cut off, and reordering its siblings can cause layout jumps. An overlay renders the drag preview in a top layer instead, so it stays crisp above everything and never reflows the list underneath.

Usage

Place a DndDragOverlay inside the scope. It renders its builder only while a drag is active, positioned to follow the pointer.

overlay.dart

DndScope(
  child: Stack(
    children: [
      board,
      DndDragOverlay(
        builder: (context, activeId) => CardTile(cardFor(activeId)),
      ),
    ],
  ),
)

Sortable lists Reorder a list with the sortable preset. Accessibility Keyboard dragging and screen-reader announcements.

Previous ← Droppable Next Collision detection →