如何在Vue.js中实现两个拖拽列表的单向拖拽（仅list1到list2）

要实现仅允许从List1拖拽到List2、禁止反向操作的效果，关键在于修改draggable组件的group属性配置——将原来的字符串类型改为对象类型，分别控制两个列表的拖拽权限：

修改后的完整代码 #

<template>
  <div class="row">
    <div class="col-3">
      <h3>可拖拽列表1（仅允许拖出）</h3>
      <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: true, push: false }" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.id"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>可拖拽列表2（仅允许接收，禁止拖出）</h3>
      <draggable class="list-group" :list="list2" :group="{ name: 'people', pull: false, push: true }" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list2"
          :key="element.id"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list1" title="列表1数据" />

    <rawDisplayer class="col-3" :value="list2" title="列表2数据" />
  </div>
</template>
<script>
import draggable from "@/vuedraggable";
export default {
  name: "one-way-drag",
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: []
    };
  },
  methods: {
    log: function(evt) {
      console.log(evt);
    }
  }
};
</script>

关键配置说明 #

• 列表1的group配置：{ name: 'people', pull: true, push: false }

  • name：保持和列表2一致，确保属于同一拖拽分组
  • pull: true：允许列表1中的项被拖出
  • push: false：禁止列表1接收任何外部拖拽来的项

• 列表2的group配置：{ name: 'people', pull: false, push: true }

  • pull: false：禁止列表2中的项被拖出（无法拖回列表1）
  • push: true：允许列表2接收来自同分组（people）的项（即列表1的内容）

另外，将循环的:key从element.name改为element.id，避免因重名导致的渲染问题，更符合Vue的最佳实践。

内容的提问来源于stack exchange，提问作者the man in the pink suit