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

[Chuck Taylor 10 Likes (Newbie)]

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

[iDad5 215 Likes (Specialist)]

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.

[OSUblake 18,538 Likes (Superhero)]

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

 

[Chuck Taylor 10 Likes (Newbie)]

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?

[OSUblake 18,538 Likes (Superhero)]

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?

 

[OSUblake 18,538 Likes (Superhero)]

If you're familiar with the ModifiersPlugin, the liveSnap function is essentially doing the same thing.

[Chuck Taylor 10 Likes (Newbie)]

Was not familiar with ModifiersPlugin, thanks for sharing that! 🤯

Now that the kiddos are in bed, I'm going to take a better look at this. Thank you as always for pointing me in the right direction @OSUblake!

[Chuck Taylor 10 Likes (Newbie)]

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.

[OSUblake 18,538 Likes (Superhero)]

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.

[Chuck Taylor 10 Likes (Newbie)]

Thanks @OSUblake. I saw in your code that you had setup your own drag handlers to work with Raphael. I'll study the implementation you came up with in that example you had done.