Sortable.js 拖拽后顺序变了但数据没更新怎么办？

这个问题其实挺常见的，我来帮你捋一捋。

Sortable.js 的 onEnd 回调里的 oldIndex 和 newIndex 是基于当前 DOM 的索引，理论上和数组索引应该是一一对应的（前提是你初始化时数组和 DOM 顺序一致）。你用 splice 操作思路是对的，但可能细节上有点问题。

核心解决方法很简单，就两步：

new Sortable(document.getElementById('list'), {

  onEnd: function (evt) {

    const oldIndex = evt.oldIndex;

    const newIndex = evt.newIndex;

    

    // 先取出旧位置的元素

    const movedItem = this.myArray.splice(oldIndex, 1)[0];

    // 再插入到新位置

    this.myArray.splice(newIndex, 0, movedItem);

    

    console.log('更新后:', this.myArray);

  }

});

这里有个关键点：你不需要关心索引谁大谁小，因为 splice(1, 0, item) 是在指定位置插入，原位置的元素会自动后移。

如果你还是感觉索引对不上，可能是下面几个原因：

原因一：数组和 DOM 初始顺序不一致

你初始化 Sortable 之前，DOM 里的元素顺序和 this.myArray 的顺序不一样。比如 DOM 是 [A, B, C]，但数组是 [B, A, C]，那索引肯定乱套。确保它们一开始就是同步的。

原因二：重复调用初始化

如果你的页面会重新渲染列表，每次都 new Sortable() 会导致事件绑定叠加，拖一次触发多次回调。可以在初始化前先销毁旧的实例：

if (this.sortableInstance) {

  this.sortableInstance.destroy();

}

this.sortableInstance = new Sortable(el, { ... });

原因三：没有用箭头函数保持 this

你的回调如果用了普通 function，this 指向的是 Sortable 实例而不是你的组件/对象。如果你想用 this.myArray，要么在外层保存引用，要么用箭头函数：

onEnd: (evt) => {

  const { oldIndex, newIndex } = evt;

  const item = myArray.splice(oldIndex, 1)[0];

  myArray.splice(newIndex, 0, item);

}

你可以先打印一下 oldIndex 和 newIndex 看看具体是多少，再打印 myArray 看看每一步的变化，这样能定位到底是哪一步出的问题。

问题在于你直接用 splice 移动元素时没有考虑索引变化。当你从旧位置移除元素后，如果新位置在旧位置后面，数组实际长度变了，newIndex 对应的位置就错了一位。

正确做法是判断一下索引关系：

new Sortable(document.getElementById('list'), {

  onEnd: function (evt) {

    const { oldIndex, newIndex } = evt;

    const item = this.myArray.splice(oldIndex, 1)[0];

    // 如果向后移动，插入位置要减1

    const insertIndex = newIndex > oldIndex ? newIndex - 1 : newIndex;

    this.myArray.splice(insertIndex, 0, item);

  }

});

或者更省事的方法是用 move 方法，Sortable.js 官方推荐用这个，帮你处理了各种边界情况：



<pre class="pure-highlightjs line-numbers"><code class="language-javascript">new Sortable(document.getElementById('list'), {

  animation: 150,

  handle: '.handle', // 你的拖拽手柄选择器

  onEnd: function (evt) {

    // 直接帮你排好序了

    this.myArray.splice(evt.newIndex, 0, this.myArray.splice(evt.oldIndex, 1)[0]);

  }

});




还有个小提示：如果你的列表项有唯一 ID，建议用 toArray + get 方法，这样更稳，不依赖 DOM 索引：



// 获取排序后的id数组

const orderedIds = sortable.toArray();



// 根据新顺序重排你的数据

this.myArray.sort((a, b) => orderedIds.indexOf(a.id) - orderedIds.indexOf(b.id));

```



索引问题排查的时候可以在回调里先 console.log 一下 oldIndex 和 newIndex，看看实际值是多少，心里就有数了。