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

What is Framer? Join the Community
Return to index
Trevor Phillippi
Posted Feb 13 - Read on Facebook

Hey, I was wondering if people had a good approach for managing Drag and Click events on the same layer? I'm working on a pretty common use case, where in a TableView, TableViewCells can be slid (DragX) to take/reveal actions. But if those TableViewCells are clicked/touched while not being dragged, I want to go to the detail view. I have the Cell snapping back to it's position on DragEnd, but this seems to trigger Click. I feel like this must be a common enough use case so I'm curious how the people handle Click/Drag events on layers. Below is short video illustrating the issue.

12 Comments

Joel Leví Hernández

+1

Giovanni Caruso

...it would be also useful to have some insight on how to lock a draggable layer (i.e. with .speedX enabled, how to drag only from left to right or from 0 to n )

Kevin Cannon

I'm tackling this right now. Been trying a few options around using TouchStart & End but haven't been successful!

Trevor Phillippi

Kevin cool, let me know if you come up with anything that works well!

Kevin Cannon

Will do!

Chris Camargo

Take a look at this example: http://framerjs.com/examples/preview/#parse-data.framer

Look at the bit where they specify 'scrolling = false' and take a look at what they're doing. I utilized this method recently to avoid triggering a click on a layer that is being dragged.

Trevor Phillippi

Oh man that makes total sense. Thanks! I'm going to try this and report back.

Trevor Phillippi

The logic from the example Chris posted, that I'm about to try:

Kevin Cannon

Figured out a similar approach myself. Maybe a bit simpler though. Just create a 'wasDragged' boolean, and change it on Dragmove.
http://share.framerjs.com/lo9iemymdhv0/

Chad Lonberger

I like how in the time it took me to write a reply you got two solid approaches. Love this community. 👍

Trevor Phillippi

I wound up using Kevin's approach, it is super minimal and works well for me. Basically DragStart sets a bool is_dragging to true, and DragEnd sets it to false. My click handler has everything inside a conditional block that runs if is_dragging is false. Thanks guys!

Andreas Wahlström

There's already an @.draggable._isDragging property, but it's triggered on touchStart, instead of DragStart. any reason for that Koen Bok?

Read the entire post on Facebook