web-dev-qa-db-ja.com

並べ替え可能なアイテムのドラッグをキャンセルする

絶対に一般的な並べ替え可能なケース：

<script>
$(function() {
  $("#sortable").sortable();
});
</script>

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

問題。ある条件でアイテムのドラッグをキャンセルする必要があり、 Andrew Whitaker の良いアドバイスがありますが、そのアプローチjquery-ui-draggableでのみ機能し、sortablesでは失敗します。

$("#sortable").sortable({
  start: function() {
    return false; // will still cause `this.helper is null`
  }
});

提案に最適です。

jqueryjquery-uijquery-ui-sortable
21
mcmlxxxiii

sort関数コールバックは、ドラッグ可能な（ demo ）のドラッグと同じようにソートに対して実行します。

$("#sortable").sortable({
    sort: function() {
        if ($(this).hasClass("cancel")) {
            $(this).sortable("cancel");
        }
    }
});
15
Mottie

Sortableには、sortable('cancel')を使用して呼び出される「キャンセル」機能があります。

ドキュメントから：「現在の並べ替え可能オブジェクトの変更をキャンセルし、現在の並べ替えが開始される前の状態に戻します。」 http://api.jqueryui.com/sortable/#method-cancel を参照してください。

使用例：

$("#sortable").sortable({
  stop: function(e, ui) {
    if ("I need to cancel this") {
      $(ui.sender).sortable('cancel');
    }
  }
});
28
root

falseを fudgey として返すと、物事を動的に並べ替えられないようにするのに最適ですが、並べ替え可能な設定には cancel option もあり、静的なソート不可も設定します：

$("#sortable").sortable({
    // this prevents all buttons, form fields, and elemens
    // with the "unsortable" class from being dragged
    cancel: ":input, button, .unsortable"
});
25
Ben Blank

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

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