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

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选项,您可以指定可以和不可以排序的项目.

jsFiddle例子

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_item").sortable({
    items: "li:not(.unsortable)"
});

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