Overdrag, Momentum, and Bounce
These three together make the layer feel like a real object, an object that you can throw and that will bounce back.
When you don’t need (some of) these simulated physics, you can switch them off.
You can drag a layer beyond its constraints, but once it crosses them, it will move slower. There’s a resistance signaling that it will bounce back.
This resistance is governed by the
overdragScale property, and by default, it’s set to
This means that a layer will move at only half the dragging speed beyond its constraints, like this:
A layer with default overdrag resistance
When you lower the
overdragScale it will feel like the constraints give more resistance:
A layer with stronger overdrag resistance
# stronger overdrag resistance blueSquare.draggable.overdragScale = 0.25
A layer with overdrag disabled
# Disabling overdrag is as easy as: blueSquare.draggable.overdrag = no
With overdrag switched off, you cannot drag a layer farther than its constraints—but you can still throw it there.
That speed a layer still has when you toss it is called momentum.
A layer with momentum disabled
# disabling momentum blueSquare.draggable.momentum = no
You can also tweak the momentum settings.
You can, for example, make a layer feel heavier by giving it more friction.
# The default value for friction is 2.1, # and for tolerance 0.1 blueSquare.draggable.momentumOptions = friction: 10 tolerance: 0.1
A layer with adjusted momentum settings
A layer will bounce back when dragged or thrown beyond its constraints.
With ‘bounce’ disabled, the layer will stick to the constraint’s borders when thrown, and when dragged over the edge it will snap back (without animation) upon release.
A layer with bounce disabled
# disabling bounce blueSquare.draggable.bounce = no
Bounce uses a spring animation, which is apparent when you change the default
bounceOptions to something crazy.
# The default values are: # tension: 200, friction: 40, tolerance: 1 blueSquare.draggable.bounceOptions = tension: 1000, friction: 10, tolerance: 1