jQuery sortable container scroll div with overflow auto

Question

I have been pulling my hair out trying to make this work.

I have two connected sortables, defined like so:

var sortlists = $("#List1, #List2").sortable(
{
    appendTo: 'body',
    tolerance: 'pointer',
    connectWith: '#List1, #List2',
    revert: 'invalid',
    forceHelperSize: true,
    helper: 'clone',
    scroll: true
});

Here is a link to an example of jsfiddle

Because of the page setup, both sortables are being contained in div's with overflow: auto they are also wrapped in parent containers with overflow set to hidden. For arguments sake, lets say there is no way around that.

Is there a way to make the container element scroll when the helper is being positioned towards the lower or upper edge of the container?

Any help would be appreciated!

Solution 1

With helper:'original', I get the scrolling behaviour you seek, (in Opera 11.61).

forked fiddle

Edit: Here's a version of the fiddle with "ganged-scrolling"

Solution 2

I think this is what you want. Drag from div (with scrollable) to div (with scrollable) without the dragged item appearing behind the div.

http://jsfiddle.net/nURN5/1/

.document.body.appendChild //required to add code with link...

The next best approach would be to actually drag a clone of the item...