gsap draggable and vue - this.x being reset for every drag

[Antdev]

Hello

I have created a separate post for this even though it is related to my earlier post today which I have marked as solved as wasn't sure if anyone looks at solved posts.

You can see in this codepen example (the one with the red square) , that as you drag to the left the value of this.x decreases.

However when I stop dragging and start a new drag it appears to reset the this.x rather than continuing to decrement where I left off.

 

Outside of vue (the example with the blue square), I find it just continues decreasing this.x getting into greater negative numbers. See 

See the Pen gOoKXPa by antdev (@antdev) on CodePen

 

Any idea why this is not the case in vue?

 

Thanks

 

Ant

 

 

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

[GreenSock]

There are two issues to keep in mind:

1. The onDrag receives an Event as the parameter, but you wrote your code assuming it was the Draggable instance itself being passed in. So you were looking at event.x which isn't a thing. 
2. Beware of what "this" (scope) is when using arrow functions can be totally different than regular functions. If you use onDrag: function() {... this} it will refer to the Draggable instance, but if you do onDrag: () => ...this it refers to whatever the scope was where that arrow function was created. That's just how JavaScript works. 

I assume this is what you wanted: 

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

[Antdev]

Thank you very much Jack. That is exactly what I was after. Thank you also for the explanation - that is really helpful.

 

I must say you Greensock folk offer amazing support for your amazing product - even on a Sunday! 

[GreenSock]

8 minutes ago, Antdev said:

I must say you Greensock folk offer amazing support for your amazing product - even on a Sunday! 

Thanks for noticing We really try to deliver a great experience. As developers, we recognize how challenging it is when there are so many libraries out there that offer almost zero support. Sometimes you're stuck and you need a friendly community to hit up for an answer. It can be the difference between hitting a deadline or letting the client down. 

 

Anyway, enjoy the tools!

[Antdev]

Oh yes you have really helped me on this occasion to meet my deadline. Really appreciated.