1

私は 2 つのリストを持っています。最初のリストにはユーザーが選択できる項目のリストが含まれており、2 番目のリストにドラッグして選択します。これを jQuery UI Sortable で実装し、jsfiddleで基本的な例を作成しました。

アイテムを最初のリストから 2 番目のリストにドラッグします。OK です。2 番目のリストの一番下までスクロールすると、問題が発生します。最初のリストから 2 番目のリストにアイテムをドラッグすることはできません。表示されているリストの末尾を超えてオーバーフローしたすべてのリスト項目には、ドロップ ターゲットが関連付けられていないようです。反対方向にコピーするときも同じことが起こります。

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 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 バグ4231でこれを報告しました。彼らがこの (未修正の) バグを再開し、将来のリリースで修正することを期待しています。

したがって、この問題に苦しんでいる場合は、バグが修正されているかどうかを確認するか、jquery ui 1.8.11 に戻すか、上記の問題のあるコードを削除して、最善を尽くしてください!

于 2012-11-06T12:52:20.060 に答える