本文介绍如何通过配置 draggable 选择器，使带有 .fixed 类的列表项完全不可拖拽、不参与排序，也不被其他元素推动，从而实现“固定位置”的 UI 效果。
本文介绍如何通过配置 `draggable` 选择器，使带有 `.fixed` 类的列表项完全不可拖拽、不参与排序，也不被其他元素推动，从而实现“固定位置”的 ui 效果。
在使用 SortableJS 构建可拖拽排序列表时，若需保留部分元素（如标题、分隔符或系统占位符）始终固定于原位置，既不能被用户拖动，也不能因其他元素移动而发生位移，关键在于精准控制可拖拽范围，而非仅依赖 filter 或 ghostClass 等辅助选项。
你当前的配置中：
draggable: '.item', filter: '.fixed',
存在两个关键问题：
- draggable: '.item' 会让所有 .item 元素（包括 .fixed）都成为潜在拖拽目标；
- filter: '.fixed' 仅阻止拖拽开始时选中 .fixed 元素，但无法阻止其他元素在拖拽过程中将其挤开或覆盖——这正是“被推动”问题的根源。
✅ 正确做法是：从源头排除固定元素进入拖拽流程。只需将 draggable 改为否定选择器：
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 选项不仅是“可拖拽元素”的声明，更是整个排序逻辑的作用域边界。精确限定该选择器，是实现“静态锚点 + 动态排序”混合布局最简洁、最可靠的方式。
