Moving Draggable Dynamically

[Sean19]

First I want to start by saying draggable is not working in the codepen. Not sure why. But that is not the reason I am here. I am able to run draggable on my local machine. The question I have is, I am trying to make draggable work dynamically. By this I mean, I want the #mix to drag to the position of the circle based on where the user drags it to and not an fixed value like I have. Also, I want to run onComplete and call a function once the #mix snaps into its position. 

See the Pen eYNddMv by joseph19 (@joseph19) on CodePen

[ZachSaucier]

Hey Sean and welcome!

 

23 minutes ago, Sean19 said:

First I want to start by saying draggable is not working in the codepen. Not sure why.

Open up your dev tools console - you'll see "InertiaPlugin is not defined" in red  That's why we recommend forking our starter pen as the beginning of any pens you make because that way you know what you need is being loaded.

 

23 minutes ago, Sean19 said:

I want the #mix to drag to the position of the circle based on where the user drags it to and not an fixed value like I have.

So you will need to calculate the position of the circle(s) that you want it to be able to be dragged to and use those as your snap values. On resize, you should kill off the old draggable if need be and create a new one (if the position of the circles has changed). 

 

23 minutes ago, Sean19 said:

I want to run onComplete and call a function once the #mix snaps into its position. 

You can use the onThrowComplete callback.

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