VueDraggable支持多列表拖拽排序与元素转移，关键在于统一group名、独立v-model绑定及正确处理@add/@remove事件；需确保key唯一、数组响应式且禁用时用disabled而非移除group。
VueDraggable 支持多列表之间的拖拽排序和元素转移，核心是让多个列表共享同一个 v-model 或通过 group 配置实现联动。关键在于正确设置 group 名称、绑定响应式数据，并处理好跨列表的新增/删除逻辑。
1. 安装与基础结构
先安装依赖：
npm install vuedraggable在组件中引入并注册：
import draggable from 'vuedraggable'模板中为每个列表使用相同 group 值，且各自绑定独立的数组（如 listA、listB）：
立即学习“前端免费学习笔记（深入）”；
<draggable v-model="listA" group="myGroup" @end="onDragEnd">...</draggable>
<draggable v-model="listB" group="myGroup" @end="onDragEnd">...</draggable>
2. 确保 group 配置一致
group 是多列表联动的唯一标识，必须完全相同（包括大小写和空格）。支持对象写法以增强控制：
- name：必填，所有列表保持一致
-
pull：设为
true或'clone'，允许从此列表拖出 -
put：设为
true，允许拖入此列表
例如：
:group="{ name: 'myGroup', pull: true, put: true }"3. 处理跨列表拖拽的数据变化
VueDraggable 不会自动修改源数组或目标数组——它只更新你绑定的 v-model 数组。因此：
- 拖入新列表时，元素自动从原数组移除、加入目标数组（前提是
v-model正确绑定） - 若需自定义行为（如复制而非移动），可监听
@add或@remove事件，在回调中手动操作数据 - 注意：不要在
@end中直接修改数组，可能引发响应异常；优先用@add/@remove
示例：
@add="onItemAdded"methods: {
onItemAdded(evt) {
// evt.item 是被拖入的 DOM 元素
// evt.from 是源列表的 Vue 组件实例
// evt.to 是目标列表的 Vue 组件实例
}
}
4. 注意事项与常见问题
- 每个列表的
v-model必须是独立的响应式数组（不能共用同一引用） - 列表项需有唯一
key（推荐用:key="item.id"），否则拖拽后视图可能错乱 - 若使用 Composition API（Vue 3），确保数组用
ref或reactive包裹 - 禁用拖拽时，设
disabledprop 即可，无需移除group
不复杂但容易忽略细节，把 group 对齐、key 唯一、v-model 独立这三点做好，多列表拖拽就能稳定运行。
