本文介绍如何通过配置 draggable 选择器，使带有 .fixed 类的列表项完全不可拖拽、不参与排序，也不被其他元素推动，从而实现“固定位置”的 UI 效果。

本文介绍如何通过配置 `draggable` 选择器，使带有 `.fixed` 类的列表项完全不可拖拽、不参与排序，也不被其他元素推动，从而实现“固定位置”的 ui 效果。

在使用 SortableJS 构建可拖拽排序列表时，若需保留部分元素（如标题、分隔符或系统占位符）始终固定于原位置，既不能被用户拖动，也不能因其他元素移动而发生位移，关键在于精准控制可拖拽范围，而非仅依赖 filter 或 ghostClass 等辅助选项。

你当前的配置中：

draggable: '.item',
filter: '.fixed',

存在两个关键问题：

• draggable: '.item' 会让所有 .item 元素（包括 .fixed）都成为潜在拖拽目标；
• filter: '.fixed' 仅阻止拖拽开始时选中 .fixed 元素，但无法阻止其他元素在拖拽过程中将其挤开或覆盖——这正是“被推动”问题的根源。

✅ 正确做法是：从源头排除固定元素进入拖拽流程。只需将 draggable 改为否定选择器：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

Sortable.create(document.getElementById('items'), {
  group: 'items',
  animation: 200,
  draggable: '.item:not(.fixed)', // ✅ 关键修改：仅允许非.fixed的.item拖拽
  // filter: '.fixed', // 可移除，已由draggable隐式覆盖
  dropBubble: true,
  onStart: function(e) {
    // 可选：记录拖拽起始信息
  },
  onEnd: function(e) {
    // 可选：更新后端或触发重渲染
  }
});

这样，.fixed 元素：

• 不响应鼠标/触摸拖拽事件；
• 不参与 Sortable 的排序计算；
• 不会被其他拖拽中的元素推挤或重排位置（因其完全脱离 Sortable 的活动节点管理）。

⚠️ 注意事项：

• 确保 .fixed 元素仍保留在 DOM 中且具有 .item 类（否则样式可能断裂），仅通过 CSS 选择器逻辑排除其交互性；
• 若需进一步强化视觉反馈，可添加 CSS：

  .item.fixed {
    cursor: default;
    user-select: none;
  }

• filter 选项在此场景下已非必需；若保留，需确保其规则与 draggable 一致，避免逻辑冲突。

总结：SortableJS 的 draggable 选项不仅是“可拖拽元素”的声明，更是整个排序逻辑的作用域边界。精确限定该选择器，是实现“静态锚点 + 动态排序”混合布局最简洁、最可靠的方式。