如何让SortableJS列表中的固定元素不被拖拽或推动？

要让列表里的固定元素既不能被拖拽，也不会被其他元素挤开位置，需要从禁止固定元素被拖拽和阻止其他元素放到固定元素区域两个方面入手，调整你的Sortable配置即可：

核心修改点 #

1. 给filter配置加上preventOnFilter: true，彻底阻止固定元素触发拖拽事件
2. 利用onMove回调，判断目标位置是否是固定元素，若是则禁止放置

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<ul id="items" class="items">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item fixed">Fixed at 3</li>
  <li class="item fixed">Fixed at 4</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
  <li class="item">Item 7</li>
</ul>

<script>
Sortable.create(document.getElementById('items'), {
  group: 'items',
  animation: 200,
  draggable: '.item',
  filter: '.fixed',
  // 阻止固定元素触发拖拽行为
  preventOnFilter: true,
  dropBubble: true,
  onStart: function(e) {},
  onEnd: function(e) {},
  // 拦截拖拽动作，禁止放到固定元素的位置
  onMove: function(e) {
    // 判断目标元素是否是固定元素，若是则返回false阻止放置
    return !e.related.classList.contains('fixed');
  }
});
</script>

代码说明 #

• filter: '.fixed'：标记.fixed元素为不可拖拽对象
• preventOnFilter: true：确保点击或拖拽固定元素时，不会触发Sortable的拖拽逻辑
• onMove回调：当拖拽元素试图移动到固定元素的位置时，返回false直接阻止这个操作，保证固定元素的位置不会被其他元素挤占

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