Vuedraggable分组名称不同仍可拖拽原因及指定列拖拽实现咨询

不同分组名称仍可拖拽的原因 #

• 分组配置不完整：如果某一个draggable组件未设置group.name，或name为空字符串，Vuedraggable会忽略分组限制，允许跨分组拖拽
• pull/push参数设置错误：若将pull或push设为true、'all'，或者自定义函数始终返回true，会强制允许跨所有分组的拖拽操作
• 版本兼容性问题：部分旧版本的Vuedraggable（比如基于Sortable.js v1.x的版本）对分组逻辑的实现存在缺陷，可能导致分组判断失效
• 分组对象复用错误：如果多个draggable组件共用同一个group配置对象，可能引发内部状态混乱，导致分组限制不生效

实现从列表a拖拽至c、d列的正确方法 #

要实现仅允许从列表a向c、d列拖拽的单向操作，需通过group的精细配置来控制拖拽权限，以下是两种常见实现方式：

方式1：共用分组名称+权限控制 #

将列表a、c、d的分组名称设为同一个值，同时通过pull/push限制拖拽方向：

<!-- 列表a（源列表） -->
<draggable v-model="listA" :group="{ name: 'a-to-cd', pull: true, push: false }">
  <div v-for="item in listA" :key="item.id">{{ item.label }}</div>
</draggable>

<!-- 列表c（目标列） -->
<draggable v-model="listC" :group="{ name: 'a-to-cd', pull: false, push: true }">
  <div v-for="item in listC" :key="item.id">{{ item.label }}</div>
</draggable>

<!-- 列表d（目标列） -->
<draggable v-model="listD" :group="{ name: 'a-to-cd', pull: false, push: true }">
  <div v-for="item in listD" :key="item.id">{{ item.label }}</div>
</draggable>

• 列表a的pull: true允许元素被拖出，push: false禁止外部元素拖入
• c、d列的pull: false禁止元素被拖出，push: true允许接收同分组的元素

方式2：自定义权限函数（更灵活） #

如果需要更精准的控制（比如a只能拖到c、d，不能拖到其他同分组列表），可以用函数形式的push/pull：

<!-- 列表a（源列表） -->
<draggable 
  v-model="listA" 
  :group="{ 
    name: 'source-a', 
    push: (to) => ['target-c', 'target-d'].includes(to.group.name) 
  }"
>
  <div v-for="item in listA" :key="item.id">{{ item.label }}</div>
</draggable>

<!-- 列表c（目标列） -->
<draggable v-model="listC" :group="{ name: 'target-c', pull: false }">
  <div v-for="item in listC" :key="item.id">{{ item.label }}</div>
</draggable>

<!-- 列表d（目标列） -->
<draggable v-model="listD" :group="{ name: 'target-d', pull: false }">
  <div v-for="item in listD" :key="item.id">{{ item.label }}</div>
</draggable>

• 列表a的push函数会判断目标列表的分组名称是否为target-c或target-d，只有符合条件才允许拖拽
• c、d列的pull: false确保自身元素不会被拖走

内容的提问来源于stack exchange，提问作者博子哥