我完全懂你的痛点——当只需要互换两个元素位置时，其他元素乱跑确实让人头疼！之前的方法只禁用了其他项的拖拽权限，但它们还是会被拖拽操作的占位逻辑挤动，导致位置混乱。下面是一个完整的解决方案，能让固定项完全保持不动，只允许指定的两个元素顺畅互换位置：

核心思路 #

要实现这个需求，不能只依赖items参数过滤可拖拽元素，还需要做到三点：

1. 用克隆助手（helper: 'clone'）避免拖拽时原位置出现空位，从根源上防止固定项移位
2. 手动控制两个可互换元素的位置交换逻辑，替代Sortable默认的自动重排
3. 限制占位符只能在两个可互换元素之间移动，避免干扰固定项的布局

完整代码实现 #

HTML结构示例 #

给需要互换的项加swapable类，其他固定项加fixed类，方便后续区分控制：

<ul id="sortable1">
  <li class="fixed">Hydrogen</li>
  <li class="swapable">Bromine</li>
  <li class="fixed">Chlorine</li>
  <li class="fixed">Argon</li>
  <li class="swapable">Sulfur</li>
  <li class="fixed">Carbon</li>
</ul>

CSS样式（可选，用于区分状态） #

通过样式让用户直观区分可拖拽项和固定项：

#sortable1 li {
  padding: 8px;
  margin: 4px;
  list-style-type: none;
  border: 1px solid #ddd;
}
.fixed {
  cursor: default;
  opacity: 0.7;
  background-color: #f5f5f5;
}
.swapable {
  cursor: move;
  background-color: #fff;
}
.ui-sortable-placeholder {
  border: 2px dashed #2196F3 !important;
  background: transparent;
}

jQuery代码 #

$(function() {
  let originalItemIndex; // 记录拖拽项的原始位置

  $("#sortable1").sortable({
    // 仅允许带swapable类的元素被拖拽
    items: "li.swapable",
    // 使用克隆的助手元素，避免原位置出现空位导致固定项移位
    helper: "clone",
    // 拖拽结束后如果未完成有效交换，让元素回到原位
    revert: true,
    // 拖拽开始时记录当前项的原始位置
    start: function(event, ui) {
      originalItemIndex = ui.item.index();
    },
    // 拖拽过程中限制占位符只能在可互换元素之间移动
    change: function(event, ui) {
      const placeholder = ui.placeholder;
      const prevEl = placeholder.prev();
      const nextEl = placeholder.next();

      // 如果占位符旁边是固定项，调整它的位置到可互换元素区域
      if (prevEl.hasClass("fixed") && nextEl.hasClass("swapable")) {
        placeholder.insertBefore(prevEl);
      } else if (nextEl.hasClass("fixed") && prevEl.hasClass("swapable")) {
        placeholder.insertAfter(nextEl);
      }
    },
    // 拖拽结束时手动交换两个可互换元素的位置
    stop: function(event, ui) {
      // 获取另一个可互换元素
      const targetSwapItem = $(this).find("li.swapable").not(ui.item)[0];
      const targetIndex = $(targetSwapItem).index();

      // 如果拖拽后的位置发生了变化，执行交换逻辑
      if (ui.item.index() !== originalItemIndex) {
        // 根据原始位置和目标位置的先后，决定插入方向
        if (originalItemIndex < targetIndex) {
          $(targetSwapItem).insertBefore(ui.item);
        } else {
          $(targetSwapItem).insertAfter(ui.item);
        }
      }

      // 刷新Sortable状态，确保固定项保持不动
      $(this).sortable("refresh");
    }
  });

  // 禁用文本选择，提升拖拽操作体验
  $("#sortable1 li").disableSelection();
});

为什么之前的方法失效？ #

你之前的代码items: "li:not(.ui-state-disabled)"只是指定了哪些元素可以被拖拽，但Sortable的默认逻辑中，拖拽时占位符会占据拖拽元素的原位置，其他元素（包括禁用项）会因为布局流的变化自动移位。而上面的方案通过克隆助手避免了原位置空位，同时手动控制交换逻辑，彻底固定了其他元素的位置。

内容的提问来源于stack exchange，提问作者mark-in-motion