4

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!

Improve this question

3 Answers 3

Reset to default
3

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"

Improve this answer
3
  • Thanks for the reply! It's almost the behavior that I want, but the example only scrolls its own list (not when you move to connected list). Also, I edited my question slightly, and created a new fork, it seems that the 'original' does not play nice with "overflow:hidden".
    – tribe84
    Commented Mar 25, 2012 at 1:59
  • Aha, you want "ganged-scrolling"! That's trivial if you want ganged-scrolling under all circumstances (see edit above). It would be more involved if you wanted ganged-scrolling just for sortable dragging and independent scrolling when using the scrollbar.
    – Beetroot-Beetroot
    Commented Mar 25, 2012 at 3:44
  • Doh! I've suddenly realised what you mean. I just realised you can drag from one list to the other. Forget ganged-scrolling! I think you're snookered. With 'clone' neither list auto-scrolls and with 'original' the dragged item vanishes until it's dropped. A solution would need to be internal to the plugin - a third 'hybrid' helper option possibly that gives the correct behaviour in both respects. I think your best bet would be to approach the plugin author because it would take anyone else some time to get into the inner workings. It's possible that he already has this in his toDo list.
    – Beetroot-Beetroot
    Commented Mar 25, 2012 at 6:56
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...

Improve this answer
0

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

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.