如何为动态生成的可排序列表锁定指定列表项？

步骤1：给锁定项添加标识类 #

首先，在渲染无序列表时，根据数据库的bit锁定字段（1=锁定），给对应的<li>元素添加一个专属类，比如locked-item。示例渲染后的结构：

<ul id="ulFeatures">
  <li id="item-1" class="locked-item">锁定的项1</li>
  <li id="item-2">可拖拽项2</li>
  <li id="item-3" class="locked-item">锁定的项3</li>
  <li id="item-4">可拖拽项4</li>
</ul>

如果是通过复选框动态切换锁定状态，只需要在复选框的change事件里，给对应列表项添加/移除这个类，同时刷新Sortable让新状态生效：

// 假设复选框的data-id属性对应列表项的ID
$(".lock-checkbox").on("change", function() {
  const targetItemId = $(this).data("id");
  $(`#${targetItemId}`).toggleClass("locked-item", this.checked);
  // 刷新Sortable实例，识别最新的锁定状态
  $("#ulFeatures").sortable("refresh");
});

步骤2：修改Sortable初始化代码 #

只需要在原有配置里添加两个关键选项，就能实现锁定功能，完全不用写大量额外逻辑：

$("#ulFeatures").sortable({
  // 仅允许非锁定项参与排序
  items: "li:not(.locked-item)",
  // 明确禁止锁定项触发拖拽行为
  cancel: ".locked-item",
  update: function(event, ui) {
    var newOrder = $(this).sortable('toArray').toString();
    // 继续执行你原有保存到数据库的逻辑即可
  }
});

为什么这两行就足够？ #

• items: "li:not(.locked-item)"：告诉Sortable只有不带locked-item类的列表项可以被拖拽和重新排序，锁定项会被排除在排序逻辑之外，始终保持固定位置。
• cancel: ".locked-item"：双重保险，直接禁止锁定项触发拖拽事件，避免用户误操作。

额外优化：视觉提示（可选） #

为了让用户直观区分锁定项，可添加简单CSS样式：

.locked-item {
  background-color: #f5f5f5;
  cursor: not-allowed;
  position: relative;
}
.locked-item::after {
  content: "🔒";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

这样就完美实现了部分列表项锁定在固定位置的需求，完全依托Sortable原生能力，几乎没有额外编写复杂代码～

内容的提问来源于stack exchange，提问作者MJR