本文介绍一种基于邻接关系对比的方法，用于在拖拽排序场景中精准识别数组中唯一被移动的元素，适用于 html 列表拖放后的状态比对。
在实现可拖拽排序的前端列表（如使用 Sortable.js 或原生 Drag and Drop API）时，一个常见需求是：仅知道拖拽前后的两个数组，如何准确判断哪个元素被移动了？ 由于拖拽本质上是“移除 + 插入”，被移动项的前后相邻元素会发生变化，而其他元素的局部邻接关系大多保持不变——这正是我们识别的关键依据。
核心思路：利用邻接元素（neighbors）的变化定位移动项
对于每个元素，我们记录它在原数组中的前驱与后继 ID（边界处用 '-' 占位）；同样计算其在新数组中的邻接 ID。若某元素在新旧数组中两个邻接 ID 均不匹配（即原前驱/后继均未出现在新邻接对中），则该元素极大概率是被主动拖拽的目标。
✅ 优势：无需额外状态标记，仅依赖数组结构；对单次单元素移动鲁棒性强。 ⚠️ 注意：当仅交换两个相邻元素（如 [A,B] → [B,A]）时，二者邻接关系均会改变，此时无法唯一确定“谁拖了谁”——但按题设要求，任选其一即可接受。
实现代码（ES6+）
function findMovedItem(oldArr, newArr) {
// 构建旧数组中每个 id 的邻接映射：{ id: [prevId, nextId] }
const oldNeighbors = oldArr.reduce((map, { id }, i, arr) => {
const prev = i === 0 ? '-' : arr[i - 1].id;
const next = i === arr.length - 1 ? '-' : arr[i + 1].id;
map[id] = [prev, next];
return map;
}, {});
// 构建新数组中每个 id 的邻接映射
const newNeighbors = newArr.reduce((map, { id }, i, arr) => {
const prev = i === 0 ? '-' : arr[i - 1].id;
const next = i === arr.length - 1 ? '-' : arr[i + 1].id;
map[id] = [prev, next];
return map;
}, {});
// 筛选出邻接关系完全改变的元素（两个邻居均不匹配）
return oldArr.filter(({ id }) => {
const [oldPrev, oldNext] = oldNeighbors[id];
const [newPrev, newNext] = newNeighbors[id];
// 检查：旧前驱和旧后继都不在新邻接对中
return ![newPrev, newNext].includes(oldPrev) && ![newPrev, newNext].includes(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('Moved item:', findMovedItem(oldArr, newArr));
// 输出: [{id: 'id5'}]补充说明与边界处理
- 性能：时间复杂度为 O(n)，适用于数百项以内的列表；超大规模建议结合 Map 优化查找。
- ID 唯一性：该方法严格依赖 id 字段全局唯一且稳定（不可重复、不可为空）。
- 多移动场景：本方案默认假设仅有一个元素被移动；若支持多元素拖拽，需扩展逻辑（如统计邻接变化频次或引入 diff 算法）。
- 空数组/单元素：函数对 length ≤ 1 的数组仍安全（邻接均为 '-'，不会误判）。
掌握这一邻接对比思想，不仅能解决拖拽识别问题，还可延伸至版本差异分析、列表变更日志生成等场景——核心在于：结构化地捕捉局部关系变化，而非仅比对绝对位置。
