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/

这就是你要找的吗？