Question

可以为一个列表项禁用jquery ui sortable吗？这是代码示例：

<ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

例如，当我点击项目时，我将禁用可排序。请帮助。

以下是javascript代码：

$(document).ready(function(){
    $('.sortable li').click(function(){
        // Disable sortable for this item.............
    });
});

Answer 1

当然，尝试这样的事情：

 $(".sortable").sortable({
      items: "li:not(.unsortable)"
    });
 $(".sortable").disableSelection();

通过使用items option，您可以指定可以排序和不排序的项目。

<强> jsFiddle example

Answer 2

您可以明确排除项目（不包括它们）：

$( ".sortable" ).sortable({
     cancel: ".disable-sort-item"
});

Answer 3

我知道，这个问题已经过时了。但我告诉你正确的答案。如何通过单击动态地禁用和启用项目。因为我在2016年遇到同样的问题：D

首先。您需要做的就是将项目设置为可开始时将被禁用的可排序项目。添加参数从列表中删除禁用的项目（在第一次初始化时需要）：

var sortable = $("#sortable-sections");
sortable.sortable({
     items: 'li:not(.ui-state-disabled)',
     helper: 'clone',
});
sortable.disableSelection();

（示例中使用的bootstrap）

然后就是添加事件监听器，我使用onClick，所以这里的示例：

sortable.find('li').click(function () {
    $(this).toggleClass('ui-state-disabled');
    $(this).hasClass('ui-state-disabled') ? $(this).removeData('sortableItem') : false;
});

Sortable-item只有在拥有调用sortableItem的数据时才可以排序，因此它会动态禁用，希望它可以帮助某人。

干杯！

Answer 4

这个问题有两个相似的答案...但是它们的行为非常不同。

使用cancel，可以使项目可分类/不可分类 动态：

$(".sortable_cancel").sortable({ 
    cancel: ".unsortable" 
});

使用items，您可以使项目可排序/不可排序，但只能在初始化时间：

$(".sortable_item").sortable({
    items: "li:not(.unsortable)"
});

查看此演示中的区别：

$(".sortable_cancel").sortable({
    cancel: ".unsortable"
});
 $(".sortable_cancel").disableSelection();
 
  $(".sortable_item").sortable({
      items: "li:not(.unsortable)"
    });
 $(".sortable_item").disableSelection();

.sortable {
    list-style-type: none;
    width: 60%;
    padding: 5px;
}

.sortable li {
  padding-left: 1.5em;
}

li.unsortable {
    background: #999;
    opacity:.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div style="width:100%;">
    <div style="width:50%; float:left;">
        <label><b>Turn ON/OFF Item1 sortable</b></label>
        <ul class="sortable sortable_cancel">
            <li id="list1_toggle">Item1</li>
            <li>Item2</li>
            <li class="unsortable">Item3</li>
            <li>Item4</li>
            <li>Item5</li>
        </ul>
        <button onclick="$('#list1_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
    </div>

    <div style="width:50%; float:right;">
        <label><b>Item1 will remain sortable</b></label>
        <ul class="sortable sortable_item">
            <li id="list2_toggle">Item1</li>
            <li>Item2</li>
            <li class="unsortable">Item3</li>
            <li>Item4</li>
            <li>Item5</li>
        </ul>
        <button onclick="$('#list2_toggle').toggleClass('unsortable')">Toggle Item1's unsortable</button>
    </div>
</div>

jquery ui可对一个li项目进行排序

4 个答案: