如何在vuejs中仅启用2个可拖动列表的一种方式拖动

Question

I am using vuedraggable library to create draggable items( https://github.com/SortableJS/Vue.Draggable )

I want to create two draggable lists and I only enable drag from list1 to list2. So I want to disable drag from list2 to list1 and list2 is empty. So I only want to move from list1 to list2. I found an example for two lists draggable you can see below:

<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable class="list-group" :list="list2" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list2"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list1" title="List 1" />

    <rawDisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>
<script>
import draggable from "@/vuedraggable";
export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: []
    };
  },
  methods: {
    add: function() {
      this.list.push({ name: "Juan" });
    },
    replace: function() {
      this.list = [{ name: "Edgard" }];
    },
    clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>

You can see the example here also: https://sortablejs.github.io/Vue.Draggable/#/two-lists

Answer 1

The move prop might be what you're looking for and you can use it in the second list as follows:

<draggable class="list-group" :list="list2" group="people" @change="log"
:move="checkMove" // <--- add this one
>

// in script
methods: {
  checkMove() {
    return false;
  }
}