Vue3 draggable实现特定元素仅允许释放到指定目标列的方案问询

你可以通过draggable组件提供的move事件（底层对应SortableJS的onMove回调）实现投放限制，返回false即可禁止元素在当前容器释放，具体实现步骤如下：

• 首先可以根据业务需求选择两种判断规则：提前给元素加允许投放的标识字段，或者直接用原数组的索引规则做判断。如果选择加字段的方式，给arrayToDrag的元素新增allowDropTarget字段，值为1代表仅允许投放至第一个目标列，值为2代表仅允许投放至第二个目标列：

  const arrayToDrag = ref([
    { id: 1, name: '元素1', allowDropTarget: 1 },
    { id: 2, name: '元素2', allowDropTarget: 2 },
    // 其他元素按规则添加标识
  ])
  

• 给两个目标列的draggable组件添加自定义标识属性，用来区分投放目标：

  <!-- 第一个目标列 -->
  <draggable
    class="drop-target-1"
    v-model="targetArray1"
    group="people"
    item-key="id"
    data-drop-target="1"
  >
    <!-- item模板 -->
  </draggable>
  
  <!-- 第二个目标列 -->
  <draggable
    class="drop-target-2"
    v-model="targetArray2"
    group="people"
    item-key="id"
    data-drop-target="2"
  >
    <!-- item模板 -->
  </draggable>
  

• 给源列表的draggable组件绑定move事件，实现投放逻辑判断：

  <draggable 
    class="nodes-to-drag" 
    v-model="arrayToDrag" 
    group="people" 
    @start="drag = true" 
    @end="drag = false" 
    @move="handleMove"
    item-key="id"
  >
    <template #item="{ element }">
      <p class="items-from-arrayToDrag">{{ element.name }}</p>
    </template>
  </draggable>
  

  对应handleMove方法实现：

  const handleMove = (event) => {
    // 获取被拖拽的元素对应的数据
    const draggedElement = event.draggedContext.element
    // 获取投放目标的DOM节点
    const dropContainer = event.to
    const targetFlag = dropContainer.dataset.dropTarget
    // 无标识说明是源列表，允许元素拖回
    if (!targetFlag) return true
    // 标识匹配则允许投放，不匹配返回false禁止投放
    return String(draggedElement.allowDropTarget) === targetFlag
  }
  

• 如果你不想修改原数组新增字段，也可以在拖拽开始时记录元素的原始索引，按索引规则判断：

  const draggingIndex = ref(null)
  
  // 修改start事件回调，记录拖拽元素的原始索引
  const handleStart = (event) => {
    drag.value = true
    draggingIndex.value = event.oldIndex
  }
  
  const handleMove = (event) => {
    const dropContainer = event.to
    const targetFlag = dropContainer.dataset.dropTarget
    if (!targetFlag) return true
    // 示例规则：索引小于3的元素仅允许投放到列1，其余仅允许投放到列2
    if (draggingIndex.value < 3) {
      return targetFlag === '1'
    } else {
      return targetFlag === '2'
    }
  }
  

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