21

この例に示すように、接続されたソート可能である2 つのリストが #sortable1あります。#sortable 2

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

sortable2 で以下を使用しました。

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

ただし、両方のテーブルからリスト項目を完全に削除します。どんな助けでも大歓迎です。

4

8 に答える 8

30

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

Uncaught TypeError: Cannot read property 'removeChild' of null

ドキュメントには特に

cancel()

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

他のイベント中に並べ替えをキャンセルすることは信頼できないため、Mj Azaniの回答receiveに示されているようにイベントを使用するか、次のようにイベントを使用することをお勧めします。stop

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

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

デモ

于 2014-07-13T13:27:30.160 に答える
19

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

  1. アイテムにクラスがあるかどうかを確認するnumber
  2. リストアイテムがドロップインされたかどうかを確認しますlist2

これは私が望むより少しハードコーディングされているので、代わりに、ドロップされたアイテムの親をに対してthisチェックして、リストが異なるかどうかをチェックすることもできます。numberこれは、 inlist1とのアイテムを持っている可能性があることを意味しますがlist2、それらは互換性がありません。

jsFiddleの例

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        stop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​
于 2012-08-02T12:44:40.500 に答える
14

この例を試してください

$('#list1').sortable({
    connectWith: 'ul'
});    

$('#list2').sortable({
    connectWith: 'ul',
    受信: 関数 (ev, ui) {
        if(ui.item.hasClass("数値"))
          ui.sender.sortable("キャンセル");
    }
});
于 2013-10-23T17:47:41.200 に答える
0

a) これらの 2 つのリストしかない場合、および b) 「番号」が実際にドラッグされてからドロップバックされることを気にしない場合は、次の方法でドラッグされるのを防ぐことができます。

 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
于 2018-07-02T19:02:26.147 に答える