This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ken Miura
Posted Apr 27 - Read on Facebook

Hi, has anyone attempted the "railing" of a draggable layer? I basically mean preventing dragging diagonally. I figure it's something like, at the start of a drag taking the bigger of deltaX vs deltaY, and then disabling one of layer.draggable.horizontal or layer.draggable.vertical during that event? Does that sound like the right approach?

7 Comments

Jordan Robert Dobson

Yes that's exactly right. Set a threshold value of around 20px and once a direction surpassed that. Lock the other.

Ken Miura

so I've been experimenting. Do you think the code here gets the basics right, or are there better ways? Thanks!

http://share.framerjs.com/jb0wuchdb98j/

Cemre Güngör

there's something called direction locking just look in the documentation

Cemre Güngör

no need to do this manually :)

Ken Miura

ah, wish, I found that before! I guess it still has the issue wen you have momentum enabled, as the layer keeps flying off in whatever direction if you flick it. Thanks!

Ken Miura

For anybody else, who missed it, this:
----------
# Snap horizontally after dragging 50px
# Snap vertically instantly
layerA.draggable.directionLock = true
layerA.draggable.directionLockThreshold = {x:50, y:0}

Jordan Robert Dobson

Sorry Ken. Didn't know you were doing this manually.

Read the entire post on Facebook