CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
tribe84
tribe84

Reputation: 5622

jQuery sortable container scroll div with overflow auto

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!

Upvotes: 4

Views: 11143

Answers (3)

John Smith
John Smith

Reputation: 601

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

Upvotes: 2

Cuse70
Cuse70

Reputation: 381

The forked fiddle with "ganged-scrolling" unfortunately exhibits the very nasty side effect of constraining (visually) the selected item to it's own div.

Upvotes: 0

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

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"

Upvotes: 3

Related Questions