取消拖动可排序项目

Question

绝对常见的可排序案例:

<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并且无法进行排序:

$("#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选项的排序配置,它可以让你设置静态unsortables还有:

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

Answer 3

该sort回调函数确实为排序为拖动(拖动同一演示):

$("#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");
    }
});