並べ替え可能なリスト内の要素のみを移動できるようにします。並べ替えなしのJqueryなし

Question

並べ替え不可いいえ、Jqueryはgroup属性を使用して複数のリストをサポートしていません。

ユーザーが異なるリスト間で要素を移動できるようにしたいが、リスト自体内の要素を並べ替えないようにしたい。

私はpullとputの機能をgroupオプションに使用してみましたが、成功しませんでした。

私はsort: falseオプションを使用して目標に近づきましたが、2つのリスト間でアイテムを移動すると、ユーザーは引き続きそのアイテムを並べ替えることができます。

私はいくつかのテストを行うために3つのリストを持つJSBinを用意しましたが、可能かどうかは本当に分かりませんでした。

http://jsbin.com/cuneku/edit?html,js,output

Answer 1

あなたはソートfalseを使用する必要があります。同じグループで並べ替えることはできません。このようにしたいですか？

 Sortable.create(list1, { 
      animation: 100, 
      group: 'same', 
      sort: false, 
     }); 

     Sortable.create(list2, { 
      animation: 100, 
      group: 'same', 
      sort: false, 
     }); 



     Sortable.create(list3, { 
      animation: 150, // ms, animation speed moving items when sorting, `0` — without animation 
      group: "same", 
      sort: false, 
     }); 

Answer 2

すべての項目の並べ替え順序を制御するdata-idが追加されました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 


    <!-- Latest Sortable --> 
    <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> 


    <!-- HTML --> 
    <ul id="list1" class="list-group"> 
    <li data-id="0" class="list-group-item">Element in group 1</li> 
    </ul> 


    <ul id="list2" class="list-group"> 
    <li data-id="1" class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li> 
    <li data-id="2" class="list-group-item">It works with Bootstrap...</li> 
    <li data-id="3" class="list-group-item">...out of the box.</li> 
    <li data-id="4" class="list-group-item">It has support for touch devices.</li> 
    <li data-id="5" class="list-group-item">Just drag some elements around.</li> 
    </ul> 

    <ul id="list3" class="list-group"> 
    <li data-id="6" class="list-group-item">Element in group 3</li> 
    </ul> 

次に、onAddイベントハンドラを使用して正しい順序に戻しました。

Sortable.create(list1, { 
     animation: 100, 
     group: 'same', 
     sort: false, 
     onAdd: function (evt){onadditem(evt, this);} 
    }); 

    Sortable.create(list2, { 
     animation: 100, 
     group: 'same', 
     sort: false, 
     onAdd: function (evt){onadditem(evt, this);} 
    }); 

    Sortable.create(list3, { 
     animation: 100, 
     group: 'same', 
     sort: false, 
     onAdd: function (evt){onadditem(evt, this);} 
    }); 

    // common sorting function 
    function onadditem(evt, me) { 
     var order = me.toArray(); 
     order.sort(); 
     me.sort(order); // apply 
    }