Draggable layers » Overdrag, Momentum, and Bounce

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.

Overdrag

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 0.5.

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

Momentum

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

Bounce

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