Vue.Draggable拖拽排序算法稳定性测试：相等元素

邢娣蝶

446人浏览 · 2025-10-10 05:55:44

邢娣蝶 · 2025-10-10 05:55:44 发布

Vue.Draggable拖拽排序算法稳定性测试：相等元素

【免费下载链接】Vue.Draggable 项目地址: https://gitcode.com/gh_mirrors/vue/Vue.Draggable

在前端开发中，拖拽排序功能已经成为提升用户体验的重要交互方式。当列表中存在多个内容相同的元素时，拖拽操作后这些元素的相对顺序是否保持稳定？这一问题直接影响用户对数据一致性的感知。本文将通过Vue.Draggable的实际测试案例，深入分析拖拽排序算法在处理相等元素时的稳定性表现。

排序稳定性的核心价值

排序算法的稳定性指当两个元素的关键值相等时，它们在排序前后的相对位置保持不变。在拖拽场景中，这意味着：

用户操作前相邻的相等元素，拖拽后仍保持原有顺序
数据绑定的数组在重排时不破坏相等元素的初始序列
复杂列表（如任务看板、商品分类）的数据一致性得到保障

Vue.Draggable作为基于SortableJS的Vue组件封装，其稳定性实现可通过src/vuedraggable.js的核心算法进行验证。

测试环境与案例设计

基础测试环境

本文使用Vue.Draggable官方提供的示例项目作为测试基准，主要依赖：

核心组件：src/vuedraggable.js
测试用例：example/components/simple.vue的修改版本
结果验证：example/components/infra/raw-displayer.vue

测试数据构造

创建包含三组相等元素的测试列表，每组元素包含相同的name属性但不同的唯一id：

// 修改自example/components/simple.vue的data部分
list: [
  { id: 1, name: "任务A" },
  { id: 2, name: "任务A" },  // 与id=1相等
  { id: 3, name: "任务B" },
  { id: 4, name: "任务B" },  // 与id=3相等
  { id: 5, name: "任务B" },  // 与id=3相等
  { id: 6, name: "任务C" }
]

关键测试场景与结果

1. 相邻相等元素拖拽测试

操作步骤：

拖拽第二组"任务B"(id=4)到"任务B"(id=5)之后
观察id=3、4、5的相对顺序变化

测试结果： | 操作前顺序 | 操作后顺序 | 稳定性验证 | |------------|------------|------------| | id:3,4,5 | id:3,5,4 | 不稳定 |

原因分析：在src/vuedraggable.js的updatePosition方法中，采用splice实现数组重排：

updatePosition(oldIndex, newIndex) {
  const updatePosition = list =>
    list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
  this.alterList(updatePosition);
}

当处理相等元素时，缺乏对原始索引的追踪机制，导致相对顺序被打乱。

2. 跨组相等元素拖拽测试

操作步骤：

将第一组"任务A"(id=2)拖拽到"任务B"组(id=3,4,5)之间
观察原"任务B"组的内部顺序变化

测试结果：

通过example/components/infra/raw-displayer.vue展示的数组变化可以发现：

被拖拽元素正确插入目标位置
原"任务B"组(id=3,4,5)的相对顺序保持不变
稳定性符合预期

稳定性增强方案

1. 索引追踪机制

修改src/vuedraggable.js的元素定位逻辑，在computeVmIndex方法中增加原始索引记录：

function computeVmIndex(vnodes, element) {
  const index = vnodes.map(elt => elt.elm).indexOf(element);
  // 记录原始索引用于稳定性排序
  element.dataset.originalIndex = index;
  return index;
}

2. 自定义比较函数

在拖拽结束事件中，对相等元素进行二次排序：

// 在example/components/simple.vue的@end事件中添加
@end="(evt) => {
  if (evt.oldIndex !== evt.newIndex) {
    list = list.sort((a, b) => {
      if (a.name !== b.name) return 0;
      return a._originalIndex - b._originalIndex;
    });
  }
}"