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 example (jsFiddle).

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 here.

Answer 1

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!