Jquery UI Sortable, Scrolling (jsFiddle Example)

Question

I am trying to figure out how to get my 'sortable lists' to scroll while I am dragging a list element.

The scroll works fine in the list I am dragging from but not in the list I am dragging to.

http://jsfiddle.net/jordanbaucke/pacbC/1/

Another question asking a similar thing:

jQuery sortable container scroll div with overflow auto

PS. Pivotaltracker, www.pivotaltracker.com does this well.

Answer 1

Old question, but I struggled with this for a few hours today so I figured I'd share what I learned.

Sortable scrolling is a function of the scrollParent's offset, its current scroll position, the current item position, and the scrollSensitivity. The sortable executes _mouseStart when you start dragging. This sets the scrollParent and caches its offset for the current sort. Armed with this knowledge, we can do a small shuffle in the over event handler:

over: function (event, ui) {
    ui.item.data('sortableItem').scrollParent = ui.placeholder.parent();
    ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset();
}

Over fires when the dragged element changes containers. The placeholder has already moved to the new container when you hit the over event. The code gets the new scrollParent and recaches the offset.

I forked Tats_innit's fiddle for brevity's sake: http://jsfiddle.net/3E2Hg/84/

The scrollParent gets referenced in other places throughout the event structure so I'm not sure this is bulletproof. Still, I think this is a good starting point. If I encounter any gotchas, I'll update this answer.

Answer 2

Working demo http://jsfiddle.net/3E2Hg/1/

Please let me know if I missed anything, and slo see my previous reply around this: Automatically scroll droppable div whilst dragging

Behaviour : Now the div where you are dragging to will also scroll. (rest code is below)

Hope this helps,

code

$(function() {
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true
    }).on('scroll', function() {
        sortlists.scrollTop($(this).scrollTop());
    });
});​