Question:

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.

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!