Draggable - onSnap?

[SteveS]

Wondering if anyone knows of an implementation to get a sort of "onSnap" behavior using Draggable. The use case is in implementing a sortable grid. Instead of running collision calculations in onDrag every frame, I'd prefer to only call the function to sort elements if snapping occurs.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

I imagine that wherever your snapping logic is, that's where you'd want to put your code. You can use a function-based snapping value if you want to tap into that further. 

[SteveS]

I tried something like that by placing custom logic in the liveSnap method but liveSnap runs as frequently as onDrag does. The problem is that it isn't really an "issue" I can illustrate. When snapping occurs, I would like to run some logic.

Here is the start of what I am trying to achieve. You'll note that it is pretty broken right now for several reasons but I don't think they're super relevant:

See the Pen gOzWrYy by StevenStavrakis (@StevenStavrakis) on CodePen

 

My idea is that once an element snaps, it runs logic to update an array which I can call another function on to handle all the animations. I'd like to avoid doing it with hit detection and it would be extremely convenient if I could easily call a function when snapping occurs.

[GreenSock]

Here's a fork that shows you one technique: 

See the Pen JjvNNRv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I added a console.log() when it snaps. So you can just drop your function call in there. 

 

Does that help? 

[SteveS]

Yes, that's what I was getting at. Had something similar earlier but didn't make use of this.x

Very nice, thanks.

[SteveS]

Coming back to this again from another angle: knowing when an element has snapped during liveSnap when using the `points:` property.

It doesn't seem like there is any way to do that similar to the previously mentioned solution.

[SteveS]

Use case:
1. User drags element over a snappable point

2. Element changes width to match point

3. User drags element to other point

4. Element changes width to accommodate new area

[GreenSock]

Happy to look at a minimal demo if you can provide one please, @SteveS. Maybe fork mine from above and tweak whatever you need to in order to show the challenge you're facing. Are you just asking how to fire a callback when it snaps to a new value in your custom logic? 

[SteveS]

I'm using a point grid to handle liveSnap. When using a function to determine when something snaps, it is easy to check when a snap occurs like above, but if I am passing a points array,  the snapping is handled inside of Draggable and I can't tell when something snaps.

[GreenSock]

Sure, once we see a minimal demo I'm sure it'll become more obvious what the issue is in context and then we can suggest a solution. 

 

You could probably do your own point snapping in a custom function if you need access to the logic to conditionally do other things, or maybe just tap into the onDrag to sense the new location, etc. Again, a minimal demo will go a long way to getting you a quick answer. It always really helps to see the issue in context. 👍

[SteveS]

Finally coming back to this.

Essentially, when using the liveSnap feature configured with a points object, how would one detect a change such that, every time the dragged element snaps, its background color changes? I assume this can be done with a reimplementation of the liveSnap function, but I don't know how to do that.

Here is a light demo showing the setup:

See the Pen f49fd2ba20f512d65a237c86c74b2a4a by StevenStavrakis (@StevenStavrakis) on CodePen

[GreenSock]

Maybe just use an onDrag?

See the Pen MWqYGoe?editors=1010 by GreenSock (@GreenSock) on CodePen

[SteveS]

Oh? I guess onDrag only fires when the element itself moves. I figured it would fire when the mouse moved while it is being grabbed. I think this actually solves the issue outright.

[GreenSock]

By the way, the minimal demo was a HUGE help, thanks for providing that. It makes things soooo much clearer and faster to diagnose. 👍