onDragEnd Issue with Draggable and Svelte

[HowyouDern]

Hi everyone,

I'm using the Draggable plugin along with Svelte and I've run into an issue after the onDragEnd function is complete. The issue I'm running into is after dropping a block on a grid tile I can not pick the block up again immediately after. However, if I drag another block, the original block resets and I am able to drag it again. 

I have created a demo in Svelte REPL: 
https://svelte.dev/repl/f71846736ba54be4a530f6a8d3e2dc9a?version=3.58.0

Steps to recreate:
Drag Block1 to a new grid tile and drop it > Try to drag Block1 again and it is not draggable
Drag Block2 to a new grid tile and drop it > You are now able to drag Block1 but not Block2

 

I am still new to GSAP so it maybe something simple that I am missing, but after pouring through the docs and staring at the code blankly, I decided I would reach out. Please feel free to let me know if you need any more info. Any help would be greatly appreciated! Thanks!

[Rodrigo]

Hi @HowyouDern and welcome to the GreenSock forums!

 

I think the issue is due to the fact that you're actually removing the Draggable target from the DOM and adding it again somewhere else, since you're reparenting the element. I don't understand enough of Svelte to know when exactly you're creating the Draggable instances after the reparenting is done. It's clear that the target is gone after it's dragged and that after the other target is moved, the Draggable instance is of the previous element is created again. I believe Svelte does offer some sort of tick event that can be ran after the DOM is updated and consolidated or a method after the component, or the store in this case, is updated. You should create a new Draggable instance for that particular new element and flush the previous one.

 

Also it might be a good idea to check GSAP Context in this case, I'm not saying that it'll resolve this issue for you, but it won't hurt:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally maybe you can get some ideas from our Svelte templates here:

https://stackblitz.com/@GreenSockLearning/collections/gsap-svelte-starters

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I am running to a meeting, so I don't have time to dig but I noticed that each time you drop into a new slot, it's re-creating your Draggables but the most recently-dropped one is NOT not the same element as what you're feeding into the Draggable. Try to do a console.log(el) right before you Draggable.create(el, ...) and highlight it in Dev Tools - you'll see that it isn't highlighted in the DOM. I assume Svelte created an entirely new element (which is now not Draggable because you created the Draggable on the old/unmounted element). 

 

I hope that at least gives you a nudge in the right direction. Seems like a lifecycle thing. I'd definitely recommend using gsap.context() for easy cleanup in an onUnmount() although I doubt that's the root of the issue here. 

[HowyouDern]

@Rodrigo and @GreenSock ,
Thank you both for the quick response. It was the svelte lifecycle, using tick() fixed it. Sorry for bringing a svelte question to the GreenSock forums (I'm relatively new to svelte as well). Thank you both again for you help! I will look into gsap.context() for a more permanent solution. I've added my quick fix just for future reference as well.

Quick Fix using tick():
https://svelte.dev/repl/7538d75f58ee477886f4987cc737a173?version=3.58.0

[Rodrigo]

Hey, no problems and don't worry. These forums are a safe place where we do our best to answer all the questions we get, so nothing wrong with the fact that it was more a Svelte thing than a GSAP one. We're all learning and teaching here 👍

 

Thanks for sharing a working example and how you resolved it.

 

Let us know if you have more questions.

Happy Tweening!