Jump to content
Search Community

Draggable - Prevent two draggable handles from snapping to the same point

Chuck Taylor test
Moderator Tag

Recommended Posts

Here is a basic demo with two handles - one red and one blue. I have two yellow circles showing as snap points. I want to make it so that the handles can snap to either of the yellow circles, but only if it is not already 'occupied' by a handle. So essentially the two handles cannot snap to the same target point at the same time. I see the liveSnap property accepts a function, so maybe this is where the magic will happen, but I'd love anyone's thoughts on this if they have run into a similar issue.

Perhaps Draggable.hitTest() might be a good thing to combine as well...

See the Pen XWzjaMb by chucktaylor (@chucktaylor) on CodePen

Link to comment
Share on other sites

Hi Chuck, I just saw your post, and without looking or thinking about the code my first thought (question) would be what should happen ist the user drags the red ball over the (already snaped) blue one. even if it doesn't snap at that moment it will just stay there - or do you want to jump it away? 

 

I would guess that you need to store the state of a point and/or target anywhere anyhow, so my approach would likely be to check at the moment of the snap if that particular taget is already occupied, or instantly remove a used target from the list of tagest, depending on what it is you want to achieve.

  • Like 4
Link to comment
Share on other sites

Hi Chuck,

 

@iDad5 does bring up a lot of good points, especially the part about what to do if you drop a handle on or near a handle that is in a snapped position.

 

But this should be a good starting point for you. Draggable's points snapping does the same thing as the snap utility, so you can tap into that inside a liveSnap function.

 

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

 

  • Like 1
Link to comment
Share on other sites

Thank you both for taking the time to look at this. I feel like every time I come on this forum with a question @OSUblake swoops down and points out some utility function I wasn't aware of!

 

@iDad5 To answer your question about what I hope when the two handles meet; It would be ideal if they felt solid. So if the blue handle was at a target, and the red one was dragged in, the red one would 'hit' the blue one and not overlap. The blue one would stay put though. This is partly why I was wondering if I might try using Draggable.hitTest() in addition.

 

@OSUblake, thank you for taking the time to add to this with some sample code to get me in the right direction. I would love to better understand the arguments being used in one of the functions. I see now in the docs that we can supply:
 a function-based value to run your own snapping logic, like liveSnap: {points: function(point) { //run custom logic and return a new point }}

I see now that this is the approach you took. What is the 'point' argument in that function, and where does it come from?

Link to comment
Share on other sites

4 minutes ago, Chuck Taylor said:

What is the 'point' argument in that function, and where does it come from?

 

GSAP passes that in. The point object is the x and y coordinates Draggable is supposed to be moving to. And whatever you return in that function is where the Draggable will end up, so if you don't want it to snap, you just return the same point that is passed in. Make sense?

 

Link to comment
Share on other sites

So I tried to take it a step further and have it so the 'handles' felt solid and could not overlap. I had a number of failed attempts using Draggable.hitTest() and the InertiaPlugin. I later found another post 

, where @OSUblake demonstrated a solution using Separating Axis Theorem, and the package https://github.com/jriecken/sat-js for handling this. As that post is a bit over 3 years old and the package has not seen much in terms of updates, I just wanted to see if that would still be a recommended solution, or is there another package anyone is aware of for helping with this, which may offer any additional benefit? I mean math is math, so I can certainly see why it hasn't had much in terms of updates. Just thought I'd check if anyone was aware of any additional solutions that might assist in this.

Link to comment
Share on other sites

You can try using that SAT library. It's just an algorithm, so it's not like it really needs updates. I would just caution you that it is not going to be easy to implement and it's not something we can really support on this forum as it's a 3rd party library. It was not easy for me to implement with Draggable, and I had a good understanding of SAT before I even attempted it.

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