jQuery 可排序禁用第一个占位符答案

【问题标题】：jQuery sortable disable first placeholderjQuery 可排序禁用第一个占位符
【发布时间】：2026-01-24 05:00:01
【问题描述】：

有没有办法可以禁用可排序无序列表中的第一个占位符？

我仍然希望能够对第一个项目进行排序（即所有项目都应该是可拖动的），但我不希望第一个项目之后的任何项目能够被拖放到第一个项目之上。

我有这种工作，但不是禁用第一个占位符，而是在删除项目时取消排序：

$(".sortable").sortable({
    beforeStop: function(event, ui) {
        if(ui.placeholder.index() <= 1) {
            $(this).sortable('cancel');
        } else {
            //sort item
        }
    }
});

任何指针将不胜感激。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

我找到了解决此问题的方法。您的代码与我的解决方案相差不远。

这个想法是使用change 选项来根据占位符的位置显示/隐藏占位符，如果位置是第一个则取消放置。

代码（jsFiddle here）：

var cancelRequired = false;
$("#sortable1").sortable({
    placeholder: "sortable-placeholder",
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $(ui.placeholder).css('display', 'none');
        } else {
            $(ui.placeholder).css('display', '');
        }
    },
    beforeStop: function(event, ui) {
        cancelRequired = (ui.placeholder.index() <= 1);
    },
    stop: function() {
        if (cancelRequired) {
            $(this).sortable('cancel');
        }
    }
});

beforeStop 和 stop 中使用的 hack 是因为尝试在 beforeStop 中直接调用取消时出现错误。 More info here 将我发送到this link。

这段代码已经用 jQuery 1.8.2 和 jQuery-ui 1.9.2 测试过

【讨论】：

我已经对您的代码进行了一些调整，以便在将项目拖动到第一个项目上方时添加一个占位符 - 占位符出现在项目最初的位置，因为如果拖放到第一个项目上方，则将移回该位置物品。我确信它可以更好地实施，但对我有用。小提琴：jsfiddle.net/hsx7M
我用你的代码来做同样的事情，但是列表中的最后一项而不是第一项。诀窍是针对 $("#parent").children().length - 1 测试 .index() 值，以了解您是否在列表中的列表项上。

【解决方案2】：

这是一种更简单的方法，通过这种方式，revert 功能也可以工作。为此，您应该为您的第一个项目添加一个类。

HTML：

<ul id="sortable">
    <li class="no_sort sortable_first">First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

脚本：

$('#sortable').sortable({
    placeholder: 'sortable_placeholder',
    cancel: '.no_sort',
    opacity: 0.5,
    revert: 100,
    change: function(event, ui) {
        if (ui.placeholder.index() < 1) {
            $('.sortable_first').after(ui.placeholder);
        }
    }
});

Fiddle

【讨论】：