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

What is Framer? Join the Community
Return to index
Alexander Bennett
Posted Mar 02 - Read on Facebook

Framer Wizards! I'm working on a prototype where a layer appears under your finger and follows you as you drag it around. I've been using the new gesture events like event.point to accomplish this, but am running into something strange. It works perfectly on my phone using frameless, but on the desktop in the Framer App, its not aligning correctly under my finger. Any way to write once that deals with both mouse and touch discrepancies?

6 Comments

Marc Krenn

Wondering about this as well :/

The "obvious" way would be to use 'Utils.isDesktop' / 'Utils.isPhone', but there must be a better way to do this.

(btw you can get rid of
dotUnderFinger.draggable.enabled = true
dotUnderFinger.draggable.momentum = false
as it's simply not needed if you move/drag layers around "manually")

Alexander Bennett

(Oh yeah, whoops, that's what you get when legacy code sticks around without you noticing 😛 good catch!)

Koen Bok

I think you are running into point returning the absolute screen position. On the phone that happen to be the right one, but on desktop it does not take the device into account. The layer.draggable accounts for this automatically, so I would try to use that if you can.

Marc Krenn

Alexander:
http://share.framerjs.com/z7vunn21ppcl/ maybe someone smarter than me will put this logic into core framer.

Alexander Bennett

Koen Bok That totally makes sense and seems to be what's happening. But instead of the absolute screen position of my monitor, I'm getting the absolutely screen position within the Framer IDE preview window.

Because I'm having the layer appear right below the initial press, draggable won't work because I have to release the press and then grab that layer to drag it around.

Knowing the point behavior, is there a way to get the distance between the edge of the Framer preview window and the Screen? Something equiviant to what you would imagine Screen.x or Screen.y to be?

JL Flores Mena

I did something like this a few weeks back. Marc Krenn is right about using isDesktop/isPhone for now. And you definitely will want to use Jordan's Pointer module. Then you need to tweak a bit the values and experiment with them to fit what you're trying to build.

Here's the prototype (for iPhone6). Longpress a photo to enter selection mode, that's the move/drag behavior I was trying to create.
https://github.com/72/GPhotos-Framer-Prototype

Read the entire post on Facebook