1

JqueryUIを使用したドラッグ/ドロップ/並べ替え可能なリストのペアが2つあります。http：//jqueryui.com/demos/sortable/

私の問題は、アイテムをsortable1、sortable2からsortable3、4に移動できることです。それらについて議論してもらいたいのです。したがって、アイテムは（1と2）と（3と4）の間でのみ移動できます。

これを行うには、sortable3とsortable4に別のクラスを割り当てる必要がありますか？とにかく機能を組み合わせることができますか？

$(function() {
        $( "ul.droptrue" ).sortable({
            connectWith: "ul"
        });

        $( "ul.dropfalse" ).sortable({
            connectWith: "ul",
            dropOnEmpty: false
        });

        $( "#sortable1, #sortable2" ).disableSelection();
        $( "#sortable3, #sortable4").disableSelection();

});


<ul id="sortable1" class='droptrue'>
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class='dropfalse'>
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class='droptrue'>
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable4" class='dropfalse'>
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>
4

2 に答える 2

4

とパラメータ、droptrueおよびdropfalse各リストに一意のIDがあるため、マークアップを変更する必要はありません。.sortable関数を少し異なる方法で呼び出す必要があります。

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

    $( "#sortable2" ).sortable({
        connectWith: "#sortable1",
        dropOnEmpty: false
    });

    $( "#sortable3" ).sortable({
        connectWith: "#sortable4",
    });

    $( "#sortable4" ).sortable({
        connectWith: "#sortable3",
        dropOnEmpty: false
    });

または、オブジェクトを使用して並べ替え可能な各アイテムのパラメーターを設定し、パラメーターを使用してオブジェクトを反復処理して、.sortableそれぞれに適用することもできます。

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true},
 {"listid":"#sortable2", "connectid":"#sortable1", "drop":false},
 {"listid":"#sortable3", "connectid":"#sortable4", "drop":true},
 {"listid":"#sortable4", "connectid":"#sortable3", "drop":false}];

$.each(lists, function(i, list) {
    $(list.listid).sortable({
        connectWith: list.connectid,
        dropOnEmpty: list.drop
    });
});

編集：
あなたのコメントに基づいて、これはあなたがさらに別のリストに結びつくことができる方法です（#sortable5、との両方に接続します#sortable3）#sortable4。 カンマで区切られた複数のIDの使用に注意してください：

var lists = [{"listid":"#sortable1", "connectid":"#sortable2", "drop":true},
 {"listid":"#sortable2", "connectid":"#sortable1", "drop":false},
 {"listid":"#sortable3", "connectid":"#sortable4, #sortable5", "drop":true},
 {"listid":"#sortable4", "connectid":"#sortable3, #sortable5", "drop":false},
 {"listid":"#sortable5", "connectid":"#sortable3, #sortable4", "drop":false}];
于 2012-06-25T22:21:27.053 に答える
0

投稿して回答してくれた皆さんに感謝します。私も同様の課題を抱えていましたが、あなたの答えは私がそれを解決するために必要なインスピレーションを与えてくれました。私も複数の並べ替え可能なリストを持っており、並べ替えグループを混在させたくありません。私の場合、グループの数はデータに依存しているので、いくつになるかわかりません。これが私が思いついた解決策です。

$(function() {    
  if ($.cookie("sortGroupsCnt")) {
      var grpcnt = Number($.cookie("sortGroupsCnt"));        
      for (i = 0; i < grpcnt; i++) { 
          var connectClass = ".s" + i;  
          $(connectClass).sortable({
              connectWith: connectClass,
              dropOnEmpty: true
          }).disableSelection(); 
      }
  };

}）;

私のPHPロジックでは、各ソートグループ内で、すべて同じクラスコードで複数のULを作成します。したがって、グループ1では、すべてのULにclass="s0"があります。グループ2では、すべてのULにclass = "s1"などがあります。次に、作成されたソートグループの数である「sortGroupCnt」というCookieを作成します。

みなさん、ありがとうございました。

于 2014-09-04T17:17:00.213 に答える