通过对比拖拽前后两个数组中各元素的前后邻居关系，可精准定位被移动的元素；若相邻两元素互换位置，则任选其一作为结果即可。
在实现拖拽排序（如使用 HTML5 Drag & Drop 或第三方库如 Sortable.js）时，一个常见需求是：仅知道拖拽前后的数组状态，如何准确识别出哪个元素被主动拖动并插入到了新位置？ 关键在于：单次拖拽仅移动一个元素，其余元素相对顺序保持不变——这意味着，被移动元素的“邻居关系”会发生显著变化，而其他元素的邻居（至少一侧）通常得以保留。
核心思路：基于邻居一致性判断
每个元素在数组中的位置决定了它的前驱（prev）和后继（next）。若某元素未被移动，那么它在新旧数组中至少有一个邻居（前或后）应保持一致（边界情况需特殊处理，如首尾元素）；而被拖动的元素，其前后邻居几乎必然全部改变。
vercel-react-best-practices
下载
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
以下是一个健壮、可直接复用的实现方案：
function findMovedItem(oldArr, newArr) {
// 构建 id → [prevId, nextId] 映射（边界用 null 表示）
const getNeighbors = (arr) =>
arr.reduce((map, { id }, i) => {
const prevId = i === 0 ? null : arr[i - 1].id;
const nextId = i === arr.length - 1 ? null : arr[i + 1].id;
map[id] = [prevId, nextId];
return map;
}, {});
const oldNeighbors = getNeighbors(oldArr);
const newNeighbors = getNeighbors(newArr);
// 检查：若某元素在新数组中既不匹配原前驱，也不匹配原后继 → 极大概率被移动
return oldArr.filter(({ id }) => {
const [oldPrev, oldNext] = oldNeighbors[id];
const [newPrev, newNext] = newNeighbors[id] || [null, null];
return !(
newPrev === oldPrev || // 前邻一致？
newNext === oldNext // 后邻一致？
);
});
}
// 示例验证
const oldArr = [{id: 'id1'}, {id: 'id2'}, {id: 'id3'}, {id: 'id4'}, {id: 'id5'}, {id: 'id6'}];
const newArr = [{id: 'id1'}, {id: 'id2'}, {id: 'id5'}, {id: 'id3'}, {id: 'id4'}, {id: 'id6'}];
console.log(findMovedItem(oldArr, newArr));
// 输出: [{id: 'id5'}]注意事项与边界优化
- ✅ 支持首尾移动：id5 移至开头或末尾时，邻居映射中对应项为 null，逻辑仍成立；
- ⚠️ 相邻互换的模糊性：如 [A,B] 变为 [B,A]，两者邻居均完全改变。此时按题设要求，返回任一（如 B）即可，无需额外区分；
- ? 性能友好：时间复杂度为 O(n)，适用于数百项以内的列表（常见 UI 场景）；
- ? 扩展建议：如需支持多元素批量拖拽，可统计“邻居变更数”，取变更最显著的 Top-N 元素；若需精确还原拖拽路径（源索引→目标索引），可额外记录 indexOf 差值。
该方法不依赖外部状态或事件钩子，纯函数式、无副作用，非常适合集成到 React/Vue 的 useEffect 或 Pinia/Vuex 的 mutation 中，作为排序变更的轻量级响应逻辑。
