1

jQueryに2つの接続されたソート可能があります。それらは sortable1 および sortable2 と呼ばれます。sortable2 から要素を取り出したら、それを sortable1 に入れます。ドラッグが開始された後、ユーザーは要素を sortable2 に戻すことはできません (空白を埋めるためにクローンが作成されています)。 sortable1 の全機能?

事前に助けてくれてありがとう！

スクリプトは次のとおりです。

<script>
$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable"                       
    }).disableSelection();
            $('.ui-state-highlight').click(function(){
                    if ($(this).parent().attr("id")!="sortable2") {
                     $(this).remove();
                    }
            });
            $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
                    helper: function(e,li) {
                                    copyHelper=li.clone(true,true).insertAfter(li);
                                    return li.clone(true,true);
                                }
    }).disableSelection();
});       
</script>

リストの背後にある html のスニペットは次のとおりです。

<div id="symbolbay">
     <p>Drop symbols here</p>
     <ul id="sortable1" class="connectedSortable"></ul>
</div>
<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Click me to delete only me</li>
    <li class="ui-state-highlight">Click me to delete only me</li>
...There are a whole bunch more, finally ending in...
</ul>
4

2 に答える 2

1

connectWith パラメーターは、ここに記載されているように一方向の関係です: http://api.jqueryui.com/sortable/#option-connectWith

したがって、単純に #sortable2 を指定すると #sortable1 に接続されますが、#sortable1 のパラメーターを空白のままにしておくとうまくいきます。

何かのようなもの：

$(function() {
    $( "#sortable2" ).sortable({
        connectWith: "#sortable1"
    })
    $( "#sortable1" ).sortable({
    })
});

http://jsfiddle.net/69vPK/2/

于 2012-12-14T01:31:31.650 に答える