Constraints

You can define the frame in which the layer should stay. You could think of this as an invisible parent layer of your draggable layer.

With the following constraints, we restrict blueSquare’s movement to 100 points from the screen’s boundaries:

# constraining dragging to 100 points from the sides
blueSquare.draggable.constraints =
    x: 100
    y: 100
    width: Screen.width - 200
    height: Screen.height - 200
Download Framer project
A draggable layer with constraints
A draggable layer with constraints

You can also limit the movement of a layer to just one direction.

The following line of code will disable all vertical movement so that the layer can only be dragged horizontally:

# no vertical dragging
blueSquare.draggable.vertical = no
Download Framer project

And of course, there’s also draggable.horizontal; both will be yes by default.

A layer that can only be dragged horizontally
A layer that can only be dragged horizontally

Leave a Reply