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并且失败sortables：

$("#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 option，它允许您设置静态不可分类：

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

Answer 3

sort函数回调对draragable（demo）的拖动进行排序相同：

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

Answer 4

尝试this example

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

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

取消拖动可排序项目

4 个答案: