37

是否可以仅针对一个列表项禁用可排序的 jquery ui？这是代码示例：

<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.............
    });
});
4

4 回答 4

55

当然，尝试这样的事情：

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

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

jsFiddle 示例

于 2013-03-12T19:57:44.777 回答
32

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

$( ".sortable" ).sortable({
     cancel: ".disable-sort-item"
});
于 2015-04-20T12:32:19.930 回答
8

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

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

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

（示例中使用的引导程序）

然后只需添加事件监听器，我使用了 onClick，所以这里的例子：

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

只有当他有称为 sortableItem 的数据时，Sortable-item 才可排序，因此它将使其动态禁用，希望对某人有所帮助。

干杯!

于 2016-09-22T06:42:29.087 回答
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>

于 2018-12-17T22:10:42.730 回答