Draggable target shifts away from cursor when autoScroll kicks in

[Bartholomey]

Hello, I have not been able to figure out how to keep the currently dragged item in the same place relative to the cursor when the autoScroll kicks in. The issue does not happen if I use native browser scroll while dragging. Could you please take a look?

See the Pen myeWmxm by B4rt-_ (@B4rt-_) on CodePen.

[Bartholomey]

Note that after the items reorder, I'm calling

this.update(false, true) <- sticky: true

Which as far as I understand should recalculate the element - cursor relation.

• sticky: Boolean

  If true, the coordinates will be updated so that the Draggable "sticks" to the pointer which can be very helpful when reparenting an element. Otherwise, the element's positioning would naturally change when being nested into a different element.

[Rodrigo]

Hi,

 

I don't have time to dig into your demo and find out what could be the problem there (which I can confirm is happening), but I can tell you that is not related with GSAP or Draggable. I forked this demo from @OSUblake, which uses the latest versions of GSAP and Draggable:

See the Pen NrRJwm by osublake (@osublake) on CodePen.

 

I made some changes to it in order to make the switch to a list and use the autoScroll feature by Draggable and it works as expected:

See the Pen pvjeLBy by GreenSock (@GreenSock) on CodePen.

 

There has to be something in the logic of your demo that is causing this. You can study the code in the demo (which is still the logic from Blake's Grid codepen) and see where it differs from you and try to reverse engineer it in order to fix your implementation.

 

Hopefully this helps

Happy Tweening!

[Bartholomey]

That did not help much. Blake's solution relies on use of position absolute and setting the items size using JS which is pretty weird and does not work in case the items size is determined by their content. I would like to be able to use natural document flow.

[Bartholomey]

Adding

gsap.to(this.target, { translateY: 0, duration: 0 });

after the items are reordered in the DOM solves the problem. Then callingthis.updatecan not be sticky anymore so justthis.update(false, false)

So the issue is definetly on GSAP's side.

[Bartholomey]

I've updated the codepen. Scroll up is still a bit fucked tho.

[Bartholomey]

To anybody reading this, I recommend using https://next.dndkit.com/overview instead. It works much better out of the box.