Question

I have here a JSfiddle demonstrating my problem.
http://jsfiddle.net/J6uM5/4/

<div id="list-A" style="height:50px; overflow-y:scroll; border:1px solid red">
<ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
</ul>

<div id="list-B">
<ul class="sortable">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
</ul>

And here is the JS

$(function() {
$('.sortable').sortable({

    connectWith: ".sortable",
    scroll:false,

}).disableSelection();

});

The issue is that sortable1 (although hidden by the div) still extends to sortable2 in the dom. In order to successfully drag an item from list1 to list2, you must be scrolled to the bottom of list1 or if you are scrolled down far enough that list1 isnt overlapping list2. Any work around would be appreciated.

Answer 1

By setting the height/overflow on the actual sortable list (ul) instead of the wrapper, it seems to work.

#sortable1 {
    height:25px;
    overflow-y:scroll;
    padding-bottom:35px;
}

See here:

http://jsfiddle.net/J6uM5/8/

Is that what you were looking for?