SortableJS拖拽元素后无法正确更新含隐藏项的sortOrder数组问题求助

你代码的核心问题有三个：

• 错误使用evt.oldIndex/evt.newIndex判断方向：这两个索引仅对应页面可见元素的排序，和包含隐藏项的sortOrder数组索引完全不匹配，方向判断逻辑从根源上失效。
• 缺少边界情况处理：拖拽到顶部时nextElementSibling为null，取索引会得到-1导致插入错误；拖拽到底部时也没有对应兼容逻辑。
• 操作顺序错误：先计算邻居索引再删除原拖拽元素，如果邻居在原拖拽元素后方，删除操作会导致邻居索引前移1位，最终插入位置偏移。

根本不需要判断拖拽方向，拖拽结束后元素已经在页面完成排序，直接取拖拽元素的前一个可见节点定位插入位置即可，逻辑如下：

1. 先获取拖拽元素ID和它的前一个可见元素ID
2. 先从sortOrder中删除拖拽元素的原有记录
3. 以前一个可见元素的位置为基准，计算插入位置：如果没有前一个可见元素就插在数组开头，否则插在前一个可见元素的后方
4. 插入拖拽元素到计算好的位置

修正后的代码：

const sortOrder = ["7","x", "5","y", "55", "1"],
  tasks = document.getElementById("tasks");

Sortable.create(tasks, {
  scroll: true,
  scrollSensitivity: 30,
  scrollSpeed: 10,
  bubbleScroll: true,
  revertOnSpill: true,
  group: 'shared',
  animation: 0,
  dataIdAttr: 'id',
  ghostClass: 'task-ghost',
  dragClass: 'task-drag',
  onEnd: (evt) => {
    const dragId = evt.item.id;
    // 先拿到拖拽完成后，当前元素的前一个可见元素ID
    const prevVisibleId = evt.item.previousElementSibling?.id;
    
    // 先删除原数组中的拖拽元素
    const oldDragIdx = sortOrder.indexOf(dragId);
    if (oldDragIdx > -1) {
      sortOrder.splice(oldDragIdx, 1);
    }

    // 计算插入位置
    let insertIdx = 0; // 默认插在最顶部
    if (prevVisibleId) {
      const prevIdx = sortOrder.indexOf(prevVisibleId);
      insertIdx = prevIdx + 1; // 插在前一个可见元素的后面
    }

    // 插入到目标位置
    sortOrder.splice(insertIdx, 0, dragId);
    console.log(sortOrder);
  }
})

这个方案可以兼容所有拖拽场景，同时保留隐藏元素的原有相对位置：

• 拖拽到顶部：前一个可见元素为空，直接插在数组开头，符合预期
• 拖拽到底部：前一个可见元素是最后一个可见节点，插在它的后方即可
• 中间任意位置插入：都能根据前一个可见元素的位置准确定位，隐藏元素不会被移动

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