Jump to content
Search Community

Draggable item while scrolling

kasperpihl test
Moderator Tag

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

Hey guys,


First of all thanks for making an amazing product. I'm so impressed by the smoothness of greensock.

I have a draggable list that are reordering a list of tasks.


I however get an issue when I'm trying to scroll inside the container. As soon as the container scrolls the drag-n-drop goes bad.

I'm then trying to call the draggable.update function when scroll is happening. It works okay if I scroll, but don't move the mouse at the same time and then moves the mouse after.


If you try play with it a little it gets super weird behaviour.


Anyone that can help me on the right track to get this to work properly?


Thanks and all the best,


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

Link to comment
Share on other sites

  • 2 weeks later...
  • Solution

Good news: there's a new autoScroll feature in the Draggable update we released today. All you need to do is set autoScroll:1 to have normal-speed scrolling, or you can change that number if you want faster or slower scrolling. Give it a shot. It should even work when the Draggable is in a scrollable container that's inside a scrollable container/page :)


Here's a quick demo: http://codepen.io/GreenSock/pen/YPvdYv/?editors=001

  • Like 3
Link to comment
Share on other sites

Hi Jack,


Great feature!


In your codepen above if you throw the draggable with some force across the (right) edge the autoscrolling won't work so you've lost the draggable. Some issue in the codepen or the lib?


EDIT: The same issue if you completely drag the draggable on the right side out of its container. So I think you have to forbid dragging the draggable out of it's parent.

Link to comment
Share on other sites

violacase, I'm not sure I understand what you're describing here, although I suspect you may be misunderstanding what this feature is for... it is solely for scrolling WHILE DRAGGING, like if the user is trying to move it further past the edge of the visible area in the scrollable container. It is NOT about "keep the entire element visible all the time even after flicking". Actually, I originally went down that path of trying to keep the entire thing visible while dragging and got it working but then realized when using it that it was far less intuitive for several reasons:

  1. What if your element is really big? What if it's even bigger than the width/height of the container's visible area? Auto-scrolling gets super clunky then. I went down this path and made it look at the momentum of your mouse to determine which direction you're trying to scroll, but trust me - during actual usage it still just felt strange even though technically it was doing everything "right". 
  2. It's abnormal - pretty much every other native auto-scrolling behavior I've seen just looks at the mouse/touch position and auto-scrolls when you get close to the edge RATHER than trying to keep the dragging element completely visible all the time.
  3. When people flick (release their mouse/touch), I'm not sure it's reasonable to assume they always want that flicked thing completely visible thereafter. And what if you flick one element to the left quickly, and then you flick another element to the right quickly (both off-screen) so they're moving at the same time? See the problem? Plus, after flicking, it may not come to rest for another second or two...but what if the user wanted to grab something else on the screen after flicking? Wouldn't it be pretty annoying to have the container scrolling to keep that flicked element visible while they're trying to grab something else (which is now moving out of the visible area)?

 After lots of experimentation, I really think the current behavior in Draggable is what users will find most intuitive and natural. 


Then again, maybe I completely misunderstood what you were describing :) After reading your "EDIT" about forbidding dragging out of its parent, I'm even more doubtful I understood you properly. Draggable doesn't let you drag it out of its parent (as far as I can tell)...did you mean out of the currently visible area (no scrolling)? If that's the case, it defeats the entire purpose of autoScroll, so I must be misunderstanding. 

  • Like 1
Link to comment
Share on other sites



It took me some time to understand your reply. Indeed there was no bug or issue.

I think your thoughts are right although it can be confusing for the end user if (by accident) he flicks outside the visible area and thus can't see his draggable element anymore. At least for me it was. I expected that the autoscroll would continue until the 'right' spot for the draggable would have been reached.

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.
  • Create New...