Jump to content
Search Community

Draggable with Snap

Victor Work test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 2 years later...

Hi Jack,

 

I am changing from hit-testing a draggable to using the liveSnap referenced above (posted 09/24/2017 ~ not sure I should use the poster's name) with my drag and drop functionality. How would your script change if the draggable is required to move on both the x and y axis? I have created a page that approximates yours but uses a grid to put the draggable and the target in two different rows. Currently, when the draggable has snapped to the target it snaps back to the target when moved positively along the y axis, but if it is moved negatively (up) the draggable does not return to the target as long as its position is negative relative to the target - just sticks there. When moved on the x axis it will return to its "home". 

Link to comment
Share on other sites

4 minutes ago, Xristi said:

Hi Jack,

 

I am changing from hit-testing a draggable to using the liveSnap referenced above (posted 09/24/2017 ~ not sure I should use the poster's name) with my drag and drop functionality. How would your script change if the draggable is required to move on both the x and y axis? I have created a page that approximates yours but uses a grid to put the draggable and the target in two different rows. Currently, when the draggable has snapped to the target it snaps back to the target when moved positively along the y axis, but if it is moved negatively (up) the draggable does not return to the target as long as its position is negative relative to the target - just sticks there. When moved on the x axis it will return to its "home". 

 

Hi @Xristi. Would you please provide a reduced test case codepen that illustrates the issue? I'm not totally sure I understand what you're asking. Also, in general it's best to create a new thread for questions like this rather than hijacking an old thread, but I know you were referencing the example above and that's probably why you thought it'd belong here. Not a big deal. 

Link to comment
Share on other sites

2 hours ago, Xristi said:

but if it is moved negatively (up) the draggable does not return to the target as long as its position is negative relative to the target - just sticks there.

This is because you kept the bounds. So if a negative x or y value (or a high x or y value outside of .mainGrid's bounds) are dragged to, it will jump to within the bounds. To get rid of the behavior, simply remove or comment out the bounds line of the Draggable create.

 

See the Pen a08e546d7a79a9522b64234747e948e3 by GreenSock (@GreenSock) on CodePen

 

To properly snap to the target in the Y direction, you will need to add conditional logic like exists for the X direction. You should be able to just copy what is there, add some variables, and switch the width/x to height/y.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...