如何在 SortableJS 中禁用固定元素的拖拽与位移-js教程-PHP中文网

如何在 SortableJS 中禁用固定元素的拖拽与位移

本文介绍如何使用 SortableJS 的 draggable 选择器精准控制可拖拽元素范围，通过 CSS 类排除（:not(.fixed)）实现固定项完全不可拖、不可被推挤，确保布局稳定性。

本文介绍如何使用 sortablejs 的 `draggable` 选择器精准控制可拖拽元素范围，通过 css 类排除（`:not(.fixed)`）实现固定项完全不可拖、不可被推挤，确保布局稳定性。

在使用 SortableJS 构建可排序列表时，若列表中包含需保持位置不变的“固定项”（如标题、分隔符、占位符等），默认配置下这些元素仍可能被其他拖拽项推挤甚至意外参与排序，破坏预期布局。核心解决方案在于精确限定可拖拽元素范围，而非依赖 filter 或事件拦截等次要手段。

关键在于正确配置 draggable 选项：它不仅决定哪些元素能被鼠标抓取，更深层影响 SortableJS 的内部碰撞检测与插入逻辑——只有被 draggable 匹配的元素才会触发拖拽行为，也才具备“推挤”其他元素的能力。因此，将固定项彻底排除在 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',             // ❌ 无需 filter；filter 仅阻止拖拽启动，但无法防止被推挤
  dropBubble: true,
  onStart: function(e) {},
  onEnd: function(e) {},
  onMove: function(e) {}
});

⚠️ 注意事项：

filter: '.fixed' 仅阻止用户点击并拖动固定项，但当拖拽其他元素经过时，固定项仍会被自动推挤或重排。因此不能替代 draggable 的精准筛选。
确保 HTML 中固定项同时具有 .item 和 .fixed 类（如
Fixed at 3
若存在嵌套结构或动态添加元素，需保证新插入的固定项也符合该类名规范，或在添加后调用 sortable.option('draggable', ...) 动态更新选择器。

? 进阶提示：
如需进一步增强语义，可为固定项添加 data-fixed="true" 属性，并改用 draggable: '.item:not([data-fixed])'，提升可维护性与可读性。

总结：Sortability 的稳定性源于对 draggable 选择器的严谨定义。通过 '.item:not(.fixed)' 一次性解决“不可拖 + 不可推”双重需求，代码简洁、性能高效、逻辑清晰，是 SortableJS 中处理固定元素的标准实践。