Is there a way to scroll a container div while dragging?

Dec 17, 2009 at 11:45 AM

I have a container div with overflow: auto set, the grid is 4 across 100x100 each item, and there are 99 items, so it will have scrollbars.   if i scroll down to the last item (#99) and want to drag it up to position 1 (which is hidden), i need the contianing div to scroll up with the drag.   I'm not sure if this is availble or not.   I know jquery sortable has a scroll parameter.



Dec 18, 2009 at 3:58 AM
Edited Nov 20, 2010 at 9:43 PM

No it doesn't have the capability but I've just played around and got it working here (not sure if I will make it part of the main release):

Interestingly I noticed in Firefox and Chrome / Safari that when dragging an item, since it gets styled position absolute, the div no longer has focus and the scroll wheel moves the page up and down instead. However, in IE and Opera the focus remains in the div so you can use the scroll wheel to scroll the div. So in the version attached here I'm listening to the mouse scroll event and overriding default behaviour to make Firefox & Chrome behave like IE & Opera.

I've added two parameters: scrollContainer which is to be the selector of the div that is styled overflow auto and scrollSpeed where a lower number is faster and a higher number slower with the default set at 20. How I've made it work is that if you move the item outside the scrollContainer (will need to set dragBetween to true to be able to do this) the div will scroll in that direction. Is this how you were thinking it would work?

Dec 18, 2009 at 9:40 PM

Just an fyi.  I added the code below to the jquery.dragsort.js file at about line 124.  The container would continue to scroll if you happened to drop an element outside the container.

list.scrollOffset.timerX = null;
list.scrollOffset.timerY = null;


Love your script sir, it's doing exactly as I had hoped.  Thank you very much! :)

Dec 19, 2009 at 12:32 AM

Good spotting Smoggle, I've made that fix in the version linked above.

No problem regarding the script, it's something I created for a site I was working on and thought others might find it useful so posted here. But it's been good for me because others like yourself have identified bugs that I missed in my testing.

Dec 20, 2009 at 5:12 PM

Glad I could help out.  Thanks again!

Aug 18, 2010 at 4:45 AM
smoggle and mcm, thx for your changes, it save me a lots of time. thanks again!
Oct 15, 2010 at 3:43 PM

Love the script!

I am having trouble getting the page to scroll though when I am dragging an object.  I am using Table Drag and Drop JQuery ( ) without any trouble (it scrolls when you drag the table row), but I would like to move over to this instead so that I can display my objects in a grid and move them around that way instead of moving whole table rows.  Without being able to drag an item up/down a page it makes things much more difficult in large lists. :(

Does anyone have a solution that will allow the elements to drag and make the page scroll as you are dragging?

Nov 3, 2010 at 9:15 AM

I've updated the zip file linked above to include a modified version which scrolls when you drag the item outside the window.

Nov 3, 2010 at 6:02 PM

Thanks for updating that!  I have tested it and I have two questions: 1) It doesn't seem to be able to move anything up a page, just down.  Is there an easy fix for that? 2) The page scrolling is so slow when going down the page that it would be faster move the image, then scroll manually, then move it again, etc.  Is there a variable that I can change that will increase the speed of the scrolling to something more usable?

Nov 4, 2010 at 9:22 AM

Sorry about that, it should now scroll up as well as down. To change the speed use $("#list").dragsort({ scrollSpeed: 10 }); where 10 is the default and a lower value is faster while a higher value is slower.

Nov 4, 2010 at 4:37 PM

Thank you!  Works great :)

Nov 20, 2010 at 9:49 PM

This has now been made part of the main release in 0.4 along with a fix to stop the page from increasing in height once you get to the bottom. If your scroll container is a div and not the window you can pass in the css selector like so: $("#list").dragsort({ scrollContainer: "#container" });

Sep 24, 2012 at 9:54 PM

Hi, I believe that I have found a problem with the scrolling code.

For example, use this url on my development box: : 

If you drag one of the first few slides past the area so that the slider pane scrolls, then you grab one of the last items and try to move it left, you will see that the "selected" item gets drawn many pixels left of where the mouse really is.  It seems to lose track of the correct offset because its not taking into account the scrollContainer's scolled position.

I figured the scrollContainer's selector should be '.slides-wrapper .slider-pane' if I understood the docs but seems '.slider-pane .slider-timeline' works better (actually will scroll).

Or am I missing something?