web-dev-qa-db-ja.com

JqueryUIでソート可能なリストアイテムのドロップを防止

この example に示すように、2つのリスト#sortable1と#sortable 2があり、これらは並べ替え可能に接続されています。

リストアイテムをsortable1からsortable 2にドラッグアンドドロップできます。ただし、sortable 1のアイテムにクラス「number」が含まれている場合、preventSortable2にドロップし、ドラッグしたアイテムをsortable 1。

私はsortable2で以下を使用しました：

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

ただし、両方のテーブルからリストアイテムを完全に削除します。どんな助けでもありがたいです。

jqueryjquery-uidrag-and-dropjquery-ui-sortable
20
user1038814

beforeStopメソッドとsortable('cancel')メソッドの組み合わせを使用して、移動するアイテムを検証できます。 この例 では、アイテムが削除されると、次の方法でアイテムが有効かどうかを確認します。

  1. アイテムにクラスnumberがあるかどうかの確認
  2. およびリスト項目がlist2にドロップされたかどうかの確認

これは少しハードコード化したいので、代わりに、ドロップされたアイテムの親をthisと照合して、リストが異なるかどうかを確認します。これは、list1とlist2にnumberのアイテムが含まれる可能性があることを意味しますが、それらを交換することはできません。

jsFiddleの例

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​
18
Richard

受け入れられた回答のコメントで briansol によって言及されているように、将来これを読む人にとっては、エラーがスローされます

_Uncaught TypeError: Cannot read property 'removeChild' of null
_

ドキュメントは特に言います

cancel()

現在の並べ替え可能オブジェクトの変更をキャンセルし、現在の並べ替えが開始される前の状態に戻します。 stopおよびreceiveコールバック関数で役立ちます。

他のイベント中に並べ替えをキャンセルすることは信頼性が低いため、 receive イベントを使用することをお勧めします Mj Azani 's answer または、次のように stop イベントを使用します。

_$('#list1').sortable({
  connectWith: 'ul',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

$('#list2').sortable({
   connectWith: 'ul',
});  
_

デモ

27
T J

試してみてください この例

 $（ '＃list1'）。sortable（{
 connectWith： 'ul' 
}）; 
 
 $（ '＃list2'）。sortable（{
 connectWith： 'ul'、
 receive：function（ev、ui）{
 if（ui.item.hasClass（ "number"））
 ui.sender.sortable（ "cancel"）; 
} 
}）;
13
Mj Azani

数回の実験の結果、最も簡単な方法は削除イベントを使用することであることがわかりました。これは、本質的にアイテムを新しいsortable（以前はconnectWithを使用してターゲットとして利用可能でした）にドロップしようとしたときにのみ起動します。

これを並べ替え可能な呼び出しに追加するだけです。

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
1
Ian Young

これが私の2セントです。接続リストのいずれかでソートを許可したくない場合は、start evenがトリガーされたときにインスタンスオブジェクトのコンテナーからリストを削除できます。これにより、ソートはまったく発生せず、ソートを復元する必要がある場合その後、機能を使用して、sortableをもう一度再作成したり、削除された要素をコンテナー配列に追加したりできます。次のようになります。

    start: function(e, ui){
        if(ui.item.hasClass('uniqToSortableItem')){
            var instance = $(this).sortable( "instance" );
            var newContainers = [];
            instance.containers.forEach((el)=> {
                if(!el.element.hasClass('sortableToDisable')){
                    newContainers.Push(el);
                } 
            });
            // in case you need to save initial array just attach it to ui.helper
            ui.helper.initialContainersArray = instance.containers;
            instance.containers = newContainers;
        }
    },
    stop: function(e, ui){
        // returning containers array to previous state if necessary
        if(ui.helper.initialContainersArray){
            $(this).sortable( "instance" ).containers = ui.helper.initialContainersArray;
        }
    }
0
Kirill
beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

これを試して。

0
TanvirChowdhury

クラス「番号」のアイテムをまったくドラッグする必要がない場合は、ドラッグアンドドロップ機能全体をクラス「番号」のないアイテムに制限することもできます。

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});

あなたはそれをここで試すことができます： http://jsfiddle.net/60gwjsgb/1/

0
ollie

A）これらの2つのリストしかない場合、b）「番号」が実際にドラッグされてからドロップされることを気にしない場合は、次のようにして、ドラッグされないようにすることができます。

 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
0
Narges Ahani