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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Jul 17 - Read on Facebook

Some people ran into the issue of having a draggable layer with clickable contents and having the click event fire when they were dragging the underlying layer, which is not what they want.

https://www.facebook.com/groups/framerjs/permalink/535898816537194/

I think I have a solution for this. It's pretty simple actually. It just compares the position on the screen on TouchStart and TouchEnd. It's easier to see for yourself in this project: http://cl.ly/1N1R0L3y0g0t

If this solves the issues, I'll add it to the Framer core.

Edit: updated the project for because layer.screenFrame is now a property.

20 Comments

Mike Kotsch

I have the same issue with SwipeUp event vs. Tap event. Any new developments on this?

Koen Bok

cc Tisho Elliott Robert let me know if I'm overlooking something.

Jens Nikolaus

Fantastic, thank you!

Tisho Georgiev

It works fine, although I'd suggest adding a few pixels of tolerance (preferably configurable) when comparing the frames to account for tiny differences between TouchStart/TouchEnd events. Fingers aren't all that precise.

Jordan Robert Dobson

^ I agree with this. When rolling it myself I typically have a 10 to 20px tolerance in there.

Rasmus Andersson

This is essentially how click-drag is implemented in Spotify. And iOS views.

On touch:
. If distance(first_touch, current_touch) > threshold:
. . Start drag

On release:
. If not dragging:
. . Perform click action

Alexander King

THANK YOU!!!

Edward Sanchez

Any ETA on when it'll be implemented into Framer? My project is already rather complicated and fitting this in would be too advanced for me.
Thanks!

Benjamin Lehn

+1 on integrating into Framer core. Seems like an essential component of any moderately complex touch UI.

Elliott Kember

I don't know how I missed this, but it's great and has my (y) for core integration. I've had to do this manually before.

Diogenes Brito

I see this problem a lot, but I end up just responding to DragEnd on the draggable layer instead of click and DragEnd. This means my prototype's borked on desktop browsers, although it works on the phone itself. Maybe I should add code to only respond to click on desktop, and DragEnd on ios.

Benjamin Lehn

But what if the draggable layer contains clickable (tappable) layers? You use DragEnd on both?

Diogenes Brito

I haven't personally tried that with a Draggable layer that has sublayers, yet.

Fran Pérez

Any ETA for this to be implemented? Thanks :)

Koen Bok

I haven't had a nice idea on how to implement. It's easy to add it like a helper function (like above) but ideally it has some natural place among events, because that is where you expect it. But the current events are based on being raw browser events, so there is no natural place for this right now. We're working on an overhaul for events but I'll see if I can find a way to add it in the mean time.

Fran Pérez

No rush, this code is working for me in the mean time. Thanks!

Hugo des Gayets

I had to give up last time I tried doing this, now it's do-able, thanks !

Cemre Güngör

Koen Bok did we ever get to this?

Jordan Robert Dobson

Would like a click threshold type of property work?

Read the entire post on Facebook