Automatically scroll droppable div when dragging

Question

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

Buttons that do not have a pink background color can be dragged / dropped.

The problem is that when you drag between a div that the Div is dragging, it does not automatically scroll down when you try to add a draggable div to the end of the list.

How can I automatically scroll the div (horizontal / vertical) im by dragging in?

Answer 1

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

Add on scroll event and each time you drag it into the second div, it identifies the event and scrolls.

This will help. :) Greetings

Pay attention . The on event gets bound to this object, i.e. The div that the user drags from when the list becomes an unequal decision in height can be: drag it to the div and then scroll it from the bottom or, perhaps, playing with this object and always choosing a larger container as a scroll reference, welcomes the comment: ) This is not as bad as a solution for -1 as a candidate, but all is well. anyhoo ,: (

This solution works fine, to deal with unequal height of the jsut div, you need to add the statement that if 2 divs unevenly exceed the upper values ​​as a base reference to scroll .

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