Question

我有两个列表 - 第一个包含用户可以选择的项目列表，他通过将它们拖到第二个列表来选择它们。我已经使用jQuery UI Sortable实现了这一点，并在jsfiddle上创建了一个基本示例。

所以将项目从第一个列表拖到第二个列表 - 确定。如果向下滚动到第二个列表的底部，则会出现问题 - 您无法将项目从第一个列表拖动到第二个列表。看起来溢出超出可见列表末尾的所有列表项都没有与它们关联的放置目标。在向另一个方向复制时也是如此。

由于排序似乎是针对列表，我怀疑我错过了一个技巧。有什么想法吗？

jsfiddle示例代码是：

HTML 的

<div class="listDiv">
    <ul id="list1" class="connected ui-sortable">
        <li id="a">a</li>
        <li id="b">b</li>
        <li id="c">c</li>
        <li id="d">d</li>
        <li id="e">e</li>
        <li id="f">f</li>
        <li id="g">g</li>
        <li id="h">h</li>
        <li id="i">i</li>
        <li id="j">j</li>
    </ul>
</div>
<div class="listDiv">
    <ul id="list1" class="connected ui-sortable">
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
        <li id="6">6</li>
        <li id="7">7</li>
        <li id="8">8</li>
        <li id="9">9</li>
        <li id="10">10</li>
        <li id="11">11</li>
        <li id="12">12</li>
        <li id="13">13</li>
        <li id="14">14</li>
        <li id="15">15</li>
    </ul>
</div>

JS

$(function() {
   $( "#list1, #list2" ).sortable({
        connectWith: ".connected"
    }).disableSelection();
});

的CSS

.listDiv {
    overflow:auto; 
    float: left; 
    width:400px;
    border: 1px solid #999;
}

#list1, #list2 {
    list-style-type: none;
    height: 200px;
}

#list1 li, #list2 li {
    font-size: 11px;
    margin: 0 5px 5px;
    padding: 5px;
    width: 300px;
    border: 1px solid #C5DBEC;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
    outline: medium none;
}

Answer 1

我相信我已经确定了引入错误的jquery ui sortable版本 - 1.8.12。以下代码似乎会导致错误：

//We ignore calculating positions of all connected containers when we're not over them if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) continue;

我已经在jquery ui bug 4231上报告了这个问题，希望他们能够重新打开这个（未修复的）bug并在将来的版本中修复它。

因此，如果您正在努力解决此问题，您可以检查错误是否已修复，或者恢复到jquery ui 1.8.11，或以其他方式删除上面提到的有问题的代码并希望最好！

JQuery sortable不会丢弃溢出列表项

1 个答案: