Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Draggable with Snap

Recommended Posts

Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.
 

See the Pen EwNevw by Noturnoo (@Noturnoo) on CodePen

Share this post


Link to post
Share on other sites

I think the problem had to do with the way you were adding a class which was changing to position:absolute. Here's a more efficient way to accomplish what [I think] you're after, using the liveSnap feature: 

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

 

Does that help?

 

  • Like 2

Share this post


Link to post
Share on other sites

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". 

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×