Vue.Draggable禁止同组元素跨区域移动的问题求助

核心问题分析 #

你之前尝试的@change事件无法阻止拖拽，因为它是拖拽完成后的通知事件，仅用于状态同步，不能拦截拖拽行为；而move属性未触发，大概率是因为对参数判断或绑定逻辑的理解有误。

下面提供两种可靠的实现方式：

方式一：通过group的pull/put配置限制 #

利用Vue.Draggable的group属性，通过自定义pull和put规则，仅允许元素在同一拖拽区域内移动：

<div v-for="(draggableArea, idx) in draggableAreas" :key="draggableArea.id">
  <draggable 
    :id="`area-${idx}`"
    :group="{
      name: 'draggableArea',
      // 仅允许拖到和源区域相同的容器
      pull: (to, from) => from.el.id === to.el.id,
      put: (to, from) => from.el.id === to.el.id
    }"
  >
    <!-- 拖拽元素 -->
    <div v-for="item in draggableArea.items" :key="item.id">{{ item.name }}</div>
  </draggable>
</div>

原理：pull控制是否允许将元素拖出当前区域，put控制是否允许外部元素放入当前区域。通过判断源容器（from.el）和目标容器（to.el）的ID是否一致，实现仅同区域内可拖拽。

方式二：使用move函数拦截跨区域拖拽 #

通过move属性绑定拦截函数，实时判断拖拽行为是否跨区域，若跨区域则阻止：

<div v-for="(draggableArea, idx) in draggableAreas" :key="draggableArea.id">
  <draggable 
    :id="`area-${idx}`"
    group="draggableArea"
    :move="handleMove"
  >
    <!-- 拖拽元素 -->
    <div v-for="item in draggableArea.items" :key="item.id">{{ item.name }}</div>
  </draggable>
</div>

methods: {
  handleMove(evt) {
    // evt.from 是源拖拽容器DOM，evt.to 是目标拖拽容器DOM
    if (evt.from !== evt.to) {
      // 跨区域拖拽，返回false阻止操作
      return false;
    }
    // 同区域内拖拽，允许执行
    return true;
  }
}

注意：move是Vue.Draggable的绑定属性（用:move）而非事件（不能用@move），函数返回false会直接阻止当前拖拽动作。

为什么你之前的方法失效？ #

1. @change事件：该事件仅在拖拽完成后触发，用于同步数据变化，无法提前阻止拖拽行为，因此return false没有效果。
2. move属性未触发：检查Vue.Draggable版本是否适配Vue2（需使用v2.x版本），同时确保绑定的是:move="test"而非@move="test"，且函数参数正确接收evt对象。

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