如何更新Angular Material拖拽排序后的JSON数组pos字段？

我明白你遇到的困扰了——当拖动第一个或最后一个元素时，只有两个元素的pos值被修改，中间元素的位置完全没跟上变化，对吧？这是因为你当前的代码只处理了被拖拽元素和原位置元素的pos，完全忽略了中间所有元素的位置调整逻辑。

最稳妥的解决方案：全量重置pos值 #

这种方法逻辑简单，几乎不会出现边界bug，不管你怎么拖动元素，都能保证每个元素的pos和它在数组中的实际索引完全对应：

修改你的drop函数如下：

drop(event: CdkDragDrop<string[]>) {
  // 先完成数组元素的拖拽移动
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  
  // 遍历数组，重新设置每个元素的pos为当前索引
  this.movies.forEach((movie, index) => {
    movie.pos = index;
  });
}

为什么这个方法有效？

不管你是把元素拖到头部、尾部，还是中间任意位置，遍历重置的方式直接让pos字段和数组的实际顺序强绑定，完全避免了手动判断拖拽方向、处理中间元素的复杂逻辑，对于大多数拖拽场景来说，这种方法的性能开销可以忽略不计，却能省掉很多调试麻烦。

进阶方案：精准调整中间元素的pos（适合大数据量场景） #

如果你担心遍历数组的性能开销（比如列表有上百条数据），可以根据拖拽方向精准调整中间元素的pos值，只修改需要变动的元素：

drop(event: CdkDragDrop<string[]>) {
  const prevIdx = event.previousIndex;
  const currIdx = event.currentIndex;

  // 先完成元素位置移动
  moveItemInArray(this.movies, prevIdx, currIdx);

  // 设置被拖拽元素的最终pos
  this.movies[currIdx].pos = currIdx;

  // 根据拖拽方向调整中间元素的pos
  if (prevIdx < currIdx) {
    // 从左向右拖拽（比如从索引0拖到3）：原位置到目标位置前一个的元素pos减1
    for (let i = prevIdx; i < currIdx; i++) {
      this.movies[i].pos -= 1;
    }
  } else {
    // 从右向左拖拽（比如从索引3拖到0）：目标位置后一个到原位置的元素pos加1
    for (let i = currIdx + 1; i <= prevIdx; i++) {
      this.movies[i].pos += 1;
    }
  }
}

为什么原来的代码会出错？

你原来的代码只是交换了event的previousIndex和currentIndex，然后修改了这两个位置的pos值，但这种逻辑只适用于相邻元素交换的场景。当你拖动元素跨多个位置时（比如把第一个拖到最后），中间的元素位置已经发生了偏移，但它们的pos值完全没被修改，自然就会出现错误。

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