1

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

所以将一个项目从第一个列表拖到第二个列表 - 好的。如果您向下滚动到第二个列表的底部，则会出现问题 - 您无法将项目从第一个列表拖动到第二个列表。似乎所有超出可见列表末尾的列表项都没有与之关联的放置目标。在另一个方向复制时也会发生同样的情况。

由于 sortable 似乎针对列表，我怀疑我错过了一个技巧。有任何想法吗？

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;
}​
4

1 回答 1

0

我相信我已经确定了引入错误的 jquery ui 可排序版本 - 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上报告了这个问题，希望他们会重新打开这个（未修复的）错误并在未来的版本中修复它。

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

于 2012-11-06T12:52:20.060 回答