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

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/

是不是你想要的？