Jump to content


Draggable autoScroll problem

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



We are creating drag and drop website creator called ucraft.me and we are using GreenSock draggable. Everything is working except one thing.

Our system is working like this:

We have different areas where we can drop new objects.

When dragging(and holding) is starting (on dragStart) the system must generate additional height of the page, which adds more scroll to my browser.


Now we should be able to drop the held element on the top of the screen as well as on the bottom of the screen. As my page height was changed before, the bottom area is more down and is unreachable for me during the holding process as GreenSock autoScroll is not letting me to get there. It seems that GreenSock doesn't know the new generated page height.


Please help!




Link to comment
Share on other sites

Hello ucraft.me, and Welcome to the GreenSock forum!


Could you please set up a reduced codepen demo so this way we can see your code (css, js, html) in context and in a live editable environment?


Here is a nice video tut by GreenSock on how to create a codepen demo:



Thanks :)

  • Like 2
Link to comment
Share on other sites

Like Jonathan said, it'd be great to see a reduced test case, but if I understand your question correctly, what you're trying to do is not currently possible. Draggable loops through all of the ancestor containors and calculates/records maximum scroll values for each on as soon as you "press". It definitely wouldn't be good to constantly re-analyze those while dragging because it'd hurt performance quite a bit. However, we could consider adding a method that'd allow you to tell Draggable to re-run that logic (and re-record all those max scroll values on-demand). Is that what you're looking for? 

  • Like 1
Link to comment
Share on other sites

Yes that is exactly what we are searching for :) This will fix all our problems. So after changing heights we will call that method and all height will be recalculated.


I have created

See the Pen adOoGg by anon (@anon) on CodePen

also to reproduce this.



Link to comment
Share on other sites

  • Solution

Okay, I made several adjustments which should make it as easy as calling update() on your Draggable instance when you want to force an update of the recorded values. See the codepen:



Notice it's linking to a preview of the upcoming release of Draggable:



Is that what you're looking for? 

  • Like 1
Link to comment
Share on other sites

This has done a thing :)


This version is not released yet? We are using bower and there is no update yet. But I have tested by replacing the bower js and everything worked.


Thank you very much!! 

Link to comment
Share on other sites

It's not released yet. We hope to release within the next week :) 

Link to comment
Share on other sites

I think there is a small issue that needed to be fixed after this changes.


So my problem with new version is that after disable() than enable(), onDragStart() is triggering.


I have looked and debugged and found this:

at the end of enable function there is an update call and in update we have this new lines for fixing my issue and it is causing this issue.

if (self.autoScroll) {
   checkAutoScrollBounds = true;

after enable() render() is called.

render function leads to setPointerPosition function and at the end there is

if (!self.isDragging) {
    self.isDragging = true;
    _dispatchEvent(self, "dragstart", "onDragStart");

So after enable(), _dispatchEvent(self, "dragstart", "onDragStart") this is called. This is harming my system because onDragStart I am changing some flags which are used in other places and like onDragStop is not triggering also so that flags are remaining.


I don't know if this should be another topic, if so I can create.



Link to comment
Share on other sites

Yes I think this solved the issue with dragStart.


There is also positioning problem.


It can be reproduced in prev codepen http://codepen.io/anon/pen/ZQGLXz


1. Drag element to the end of scroll

2. when you drop scroll is jumping up, than scroll up find element and try to drag it


element is gone (its coordinates top is not calculated correctly)

Link to comment
Share on other sites

Not sure quite yet. You're welcome to use that preview version I linked to in the mean time. 

Link to comment
Share on other sites

  • 1 month later...

Oh, sorry, I believe this is already in the released version that has been in the wild for a few weeks. I forgot to post a note here in this thread. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.