jQuery UI Sortable: Scroll entire page as well as container

Question

I have two lists of elements, and I have enabled jQuery UI sortable on both of them. I used the connectWith option to enable me to drag between the two lists.

One list has a lot of elements in it, so I added overflow-y: scroll to it, but when I try to grab an element from that list and drag it to the other, it only scrolls the list, not the entire page.

I made a jsFiddle demo (http://jsfiddle.net/MCcuc/). Scroll down, and try to move Item Q (drag it by the gray bar on top of the box) from the red list into the green list. You'll see the red list scrolls, but the page does not. How can I scroll the whole page as well as the list?

I'm just enabling sortable without many options:

$('.sort').sortable({
    connectWith: '.sort',
    handle: '.handle'
});

Answer 1

That's indeed a conflict with scrollable overflow. The draggable helper element is constrained to its parent in that case, probably because trying to "get outside" the parent only results in enlarging its scrollable region.

A workaround is to pass a helper function that clones the dragged element and reparents it under the page body. This way, the draggable helper element will be outside of its original parent from the start, and therefore will scroll the entire page:

$(".sort").sortable({
    connectWith: ".sort",
    handle: ".handle",
    helper: function(event, element) {
        return element.clone().appendTo("body");
    }
});

You will find an updated fiddle demonstrating this here.