Scrolling a sortable/dragable item's parent container when its border is reached


I have a huge list of items that can be sorted by dragging them. I noticed that once the list gets very long and overflows its parent container's height, dragging an item to a position not currently visible gets very inconvenient.

Here is an <a href="http://jsfiddle.net/mobweb/xjrLN/" rel="nofollow">example (jsFiddle)</a>.

I want to drag the first element to right before the last element in one gesture. Currently that's not possible because I can't drag and scroll at the same time. Is there a setting that enables auto-scrolling the container as soon as I drag one of its children near the border of the container?

I have tried different settings for appendTo as well as containment, but no setting had the desired effect.

Updated with solution

Thanks to the answer by @Shannon below, I was able to get it working, you can find the updated solution <a href="http://jsfiddle.net/xjrLN/2/" rel="nofollow">here</a>.


You'll have to create a scroll event once the user drags past half way of the scroll. It's pretty simple.

$(li).drag(function(e) { $("ul").scrollTop(function(i, v) { var h = $(ul).height(); var y = e.clientY - h / 2; return v + y * 0.1; }); });

This wont work, but it's a start so you can get an idea how you'll have to approach it, I just didn't have the time this morning to fully finish it!


  • how to trigger dragging of image with drag of other image using jquery
  • How to make html text box draggable and resizable using jQuery UI plugins?
  • UICollectionView Enable deselecting cells while allowsMultipleSelection is disabled
  • Content Panes in Java
  • How to capture video stream using emgu cv
  • EWS SearchFilter.ContainsSubstring to filter on Sender Email Address
  • Getting wrong UIButton tag on Long press gesture recognizer
  • jquery - how to CUT LI elements from one UL to another UL
  • Angular JS: Javascript not working inside custom directive template
  • How to drag image clone after drop.?
  • load a page using POST to iframe
  • Redisplay results list on AutoCompleteExtender through javascript
  • EJB @Schedule issue
  • JQuery UI selectable plugin - Multiple mouse drag selection and unselect option
  • Why “propdp” code snippet doesn't use the nameof operator for the name of the registered proper
  • Change color of row programmatically in WatchKit
  • Can't CTRL+Drag NSButton to custom NSView header
  • jquery draggable stop event
  • wrong item changes in recyclerview
  • How to expand parent div to account for child's overflow?
  • CORS with socket.io
  • C# List of Panels
  • Blackberry 6: how to detect a long click on track pad?
  • Hibernate to update table schema
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • Jackson Parser: ignore deserializing for type mismatch
  • Change multiple background-images with jQuery
  • Align navbar back button on right side
  • Does CUDA 5 support STL or THRUST inside the device code?
  • Trying to switch camera back to front but getting exception
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Weird JavaScript statement, what does it mean?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Linking SubReports Without LinkChild/LinkMaster
  • How can I remove ASP.NET Designer.cs files?
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • Django query for large number of relationships