javascript - 可排序列表重叠并防止拖放

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/

那是你要找的吗？