Automatically scroll droppable div whilst dragging

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 proble

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();;


​