Question

In this fiddle : http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/76/

The buttons which do not a have pink background color can be dragged/dropped.

The problem is when dragging between the div’s the div im dragging to does not automatically scroll down when trying to add the draggable div to end of list.

How can I automatically scroll the div(horizontally/vertically) im dragging to?

Answer 1

Working demo http://jsfiddle.net/X3rKJ/ or http://jsfiddle.net/X3rKJ/1/

Add on scroll event and every time when you drag it to second div it identifies the event and scroll.

This will help. 🙂 cheers

Please note The on event gets bind to the this object i.e. the div from where the user drags when the list become unequal height solution can be: Drag it to the div and then scroll it to bottom or possibly playing around with this object and always choosing the bigger container as a scroll reference, cheers for the comment though. 🙂 Its not that bad as a solution for -1 as a candidate but all good. anyhoo, 🙁

This solution is working fine, to deal with unequal height of the div jsut need to add a statement that if 2 div’s are unequal height take the larger as the base reference to scroll.

code

var sortlists = $(".connected").sortable({
     connectWith : ".connected",
     items       : ".myDivs:not(.excludeThisCss)",
     tolerance   : 'pointer',
     revert      : 'invalid',
     forceHelperSize: true

}).on('scroll', function() {
     sortlists.scrollTop($(this).scrollTop());
}).disableSelection();;


​