Отмена перетаскивания сортируемого элемента

Question

Абсолютно распространенный сортируемый случай:

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

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

Проблема. Необходимо отменить перетаскивание элемента при некоторых условиях, и есть хороший совет Эндрю Уитакер , но этот подход работает только для jquery-ui-draggable и сбои для сортировки:

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

Буду благодарен за предложения.

Answer 1

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');
    }
  }
});

Answer 2

Возвращение false как fudgey предлагает отлично подходит для создания вещей, которые не могут быть динамически нестабильными, но есть также опция cancel в конфигурации для сортировки, которая позволяет вам настроить статические несортируемые как хорошо:

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

Answer 3

Функция обратного вызова sort делает то же самое для сортировки и перетаскивания для перетаскиваемого ( demo ):

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

Answer 4

Попробуйте этот пример

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

$('#list2').sortable({
    connectWith: 'ul',
    receive: function(ev, ui) {
       if(ui.item.hasClass("number"))
          ui.sender.sortable("cancel");
    }
});