Avanzado · plugin: Draggable + Inertia

Arrastra, lanza, encaja

Agarra un ladrillo y lánzalo. InertiaPlugin lo desliza con impulso real y lo encaja en la cuadrícula. Todo el montaje es la directiva drag en cada ladrillo; las instancias mueren con el componente.

DraggableInertiaPluginsnap

arrastra los ladrillos, lánzalos, encajan en la cuadrícula

<!-- 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>

Cómo funciona

La directiva drag es Draggable.create() con inputs de signal: tipo, límites (el padre por defecto), inercia y un snap de cuadrícula. Las instancias se matan al destruir: no quedan listeners de puntero sueltos tras navegar. La API cruda también funciona, directo en el callback.
inertia: true entrega la velocidad de soltado a InertiaPlugin, y snap redondea el aterrizaje a la cuadrícula. Impulso, fricción y asentamiento son puro GSAP.
Dispersar es un handler contextSafe que anima los mismos transforms x/y que usa Draggable, así que arrastrar y animar nunca pelean por el estado.