Draggable out of sync when swapping elements

[Jens De Muynck]

Hi all!

 

I'm trying to make a sortable vertical list, but when i try to move a row to the bottom and autoScroll activates, the row becomes out of sync.

I tried this.update(false, true) but that didn't seem to help.

Am I missing something, or do i need a different approach?

 

TIA,

Jens

See the Pen XWQoxyR by JensDeMuynck (@JensDeMuynck) on CodePen

[Rodrigo]

Hi,

 

This most likely has to do with the fact that you're making the reparenting of the elements (updating the DOM) in the onDrag callback. If I was you I'd do that in the onDragEnd and during the onDrag I just move the other elements around. In this cases is quite simple since they move a specific amount of pixels up/down (the height of the element being dragged. If all the elements have the same height is even easier.

 

Also you should try using Draggable's hitTest method in order to check if the dragged element is overlapping another from the collection:

https://gsap.com/docs/v3/Plugins/Draggable/static.hitTest()

 

Unfortunately I didn't had time to create a demo with my approach since this is not the simplest thing to achieve (not the most complex though, but definitely not simple), but hopefully this somehow helps.

Happy Tweening!

[Jens De Muynck]

Thanks for your reply!

 

I updated my codepen to only update the DOM in the onRelease method, and it worked like i expected it to. However, when i applied these changes in my project, I encountered a similar problem.

After further testing, i discovered that the issue is with the scroller parent, so I updated my codepen to closer resemble my project where the 'main' element is the scroller instead of the body.

Does Draggable not take a different scroller into account?

 

Updated codepen:

See the Pen NWmopxv by JensDeMuynck (@JensDeMuynck) on CodePen

[Jens De Muynck]

Aha! Apparently it's not necessary to call this.update(false, true) anymore in this scenario!

Although it's a bit weird that this breaks things.

 

Thanks for the help! ❤️