Issue with `Draggable.update` and scrollable elements

[klaussner]

Hi GreenSock team,

 

I'm trying to use the Draggable.update function to make a Draggable stick to the cursor because in my application, some elements change their size during the drag. However, I noticed that Draggable.update yields different (and unexpected) results if the Draggable is inside a scrollable DOM element other than the body element. The attached CodePen demonstrates the problem.

 

If you drag the purple box to the bottom of the orange container, it doesn't stick to the cursor. It still moves while scrolling but at a lower speed. If you remove the outermost div, dragging and scrolling works as expected.

 

Do you know if/how I can call Draggable.update and make the element stick to the cursor in a scrollable element?

See the Pen rNVJzZW by cklaussner (@cklaussner) on CodePen

[GreenSock]

That's a tricky scenario indeed but I think I've got a fix I can apply in the next release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

 

Here's a fork: 

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

 

(note that you can't just drop the new version into your old codepen because the GSDevTools file technically has Draggable inside of it, and that was loading AFTER the regular Draggable file, thus the Draggable in it overwrote the updated one). 

 

Does that work well for you? 

[klaussner]

Thank you very much! I tested the preview version in my application and it works perfectly. 👍

[GreenSock]

This fix is in the latest release that we just pushed out officially (3.2.5). Enjoy!