vue.draggable中连接两个可拖拽列表的关键属性是什么？

你猜的完全没错，group属性就是让两个列表互相识别为可拖拽交互区域的核心必要属性。

核心原理 #

vue.draggable底层依赖SortableJS，group属性的作用是定义「拖拽分组」——只有拥有相同组名的拖拽容器，才能互相接收对方拖过来的元素。示例里两个<draggable>组件都设置了group="people"，所以它们属于同一个拖拽组，自然能实现双向拖拽。

关于group的细节 #

• 字符串形式（如示例）是最基础的用法，等价于配置{ name: 'people', pull: true, put: true }
• 若需要更精细控制，可以用对象配置：
  • name: 分组名称（必填，用来标识同组容器）
  • pull: 是否允许将当前容器的元素拖出去（默认true）
  • put: 是否允许接收同组其他容器的元素（默认true）

不能忽略的配套属性 #

除了group，每个<draggable>组件必须绑定:list属性（比如:list="list1"、:list="list2"），这是vue.draggable实现「拖拽操作同步数据」的关键——没有这个属性，拖拽后页面视觉变化了，但对应的数组数据不会自动更新，业务逻辑就会出错。

示例关键代码片段 #

两个拖拽容器的核心配置：

<!-- 第一个拖拽容器 -->
<draggable class="list-group" :list="list1" group="people" @change="log">
  <!-- 列表项内容 -->
</draggable>

<!-- 第二个拖拽容器 -->
<draggable class="list-group" :list="list2" group="people" @change="log">
  <!-- 列表项内容 -->
</draggable>

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