Advanced · plugin: Draggable + Inertia

Drag, throw, snap

Grab a brick and throw it. InertiaPlugin glides it with real momentum and snaps it to the grid. The whole setup is the drag directive on each brick; the instances die with the component.

DraggableInertiaPluginsnap

drag the bricks, throw them, they snap to the grid

<!-- the whole drag setup is one attribute -->
<div class="arena">
  <div class="brick" drag [snap]="96"></div>
</div>

<!-- inputs when you need them -->
<div drag="x" [inertia]="false"
  [bounds]="'.arena'"
  (dragEnd)="save()">
</div>

How this works

The drag directive is Draggable.create() with signal inputs: type, bounds (the parent by default), inertia, and a grid snap. Instances are killed on destroy, so no stray pointer listeners after navigation. The raw API works too, straight from the callback.
inertia: true hands the release velocity to InertiaPlugin, and snap rounds the landing position to the grid. Momentum, friction, and settling are all GSAP.
Scatter is a contextSafe handler tweening the same x/y transforms Draggable uses, so dragging and tweening never fight over state.