可重排列表重叠和防止拖放

Question

我在这里有一个JSfiddle展示我的问题。 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> 

这里是JS

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

    connectWith: ".sortable", 
    scroll:false, 

}).disableSelection(); 

}）;

问题是sortable1（虽然被div隐藏）仍然扩展到dom中的sortable2。为了成功将一个项目从list1拖到list2，必须将其滚动到list1的底部，或者如果向下滚动得足够远以至于list1不会与list2重叠。任何工作将不胜感激。

Answer 1

通过设置实际的可排序列表（ul）而不是包装的高度/溢出，它似乎工作。

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

在这里看到：

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

是不是你想要的？