logo svelte /motion v0.7.2
FIG-001/ DRAG

elastic constraint stage.

A constrained drag pattern for product UIs: the tile can be pulled against the bounds with a little elastic give, then springs back inside the measured ref on release.

  • Drag the tile past any edge. The dragElastic value allows a small overpull while the pointer is down, so the bounds feel physical instead of mechanically clipped.
  • The stage element is passed directly into dragConstraints. Svelte Motion measures that ref and keeps the final resting position inside it.
  • Release outside the stage or re-grab during the spring-back. The card should settle smoothly without jumping or fighting the pointer.
↩ all examples
pattern · ref-constrained drag mode · live running source
drag lab constraints ref
top
right
bottom
left
SM drag
elastic edge pull spring settle ref bounds
category · drag
sheet · sheet 01 / 01
⟳ to re-run