Droppable

A droppable is a target a draggable can land on. Mark an area with DndDroppable and a unique id; the engine reports when a draggable is over it and which target a drag ends on.

You'll learn

—How to define a drop target.
—How the engine decides which target is under the pointer.
—How to give visual feedback while a draggable hovers.

Usage

Give each droppable a unique DndId. On the draggable, onDragEnd reports the target id through event.overId.

droppable.dart

DndDroppable(
  id: const DndId('inbox'),
  child: const SizedBox(width: 240, height: 160, child: Text('Inbox')),
)

Collision detection

When a draggable overlaps several droppables, a collision strategy decides which one wins. The strategy is shared math in the engine, so Flutter and Jaspr resolve the same target:

•Closest center — the target whose center is nearest the pointer. A solid default for grids and free layouts.
•Largest overlap — the target the dragged element overlaps most. Natural for list and Kanban reordering.

Hover feedback

Read whether a target is currently being hovered to highlight it — the drop zones on this site light up exactly this way.

feedback.dart

DndDroppable(
  id: const DndId('inbox'),
  builder: (context, state, child) => DecoratedBox(
    decoration: BoxDecoration(
      border: Border.all(
        color: state.isOver ? Colors.orange : Colors.grey,
      ),
    ),
    child: child,
  ),
  child: const Text('Inbox'),
)

Drag overlay Render a floating preview that follows the pointer. Sortable lists Reorder a list without wiring targets by hand.

Previous ← Draggable Next Drag overlay →