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

What is Framer? Join the Community
Return to index
Michael McLaughlin
Posted Apr 23 - Read on Facebook

Hey guys, I am trying to prototype a drag/drop interaction and having trouble figuring out how to write it. Basically trying to trigger an event when one layer is dragged on top of another layer, otherwise it returns to its initial position. I assume its an if/else during DragMove. I need help with the logic for the if statement. I was playing with MouseOver during DragMove, but no luck.

3 Comments

Krijn Rijshouwer

Hey Michael McLaughlin,

It's pretty easy. What you are going to want to do is listen to the Drag event (or DragEnd if you would like to only drop when someone stops dragging) and then you just check if the y position has moved into the drop area. I made you a little example → http://share.framerjs.com/7tuzz36d7z25/

Benjamin Den Boer

Hey Michael McLaughlin, here's a little example in addition to Krijn's one that checks whether or not you're hovering over a layer, and checks the horizontal and vertical position + allows you to define a little offset (I've set it to half of the draggable layer). Check it out — http://share.framerjs.com/u1jfgggc7fsq/

https://media.giphy.com/media/xT1XGYDMVI6lMhJkZ2/giphy.gif

Michael McLaughlin

Hey Krijn Rijshouwer Benjamin Den Boer thanks so much for the fast response I was able to come up with a solution that let me prototype what I needed to based off your examples. Will totally have to keep playing with Framer.

Read the entire post on Facebook