Question

尝试遵循this tutorial，但在容器之间进行双向拖动。将问题减少到最少的代码集，我可以在列表中进行排序，但不能在列表之间进行排序。我从文档中得到的印象是，将两个可拖动对象都设置为相同的组名将启用它，但是事实并非如此。

那么，为了只允许将项目从一个列表移动到另一个列表，我需要做什么？这是我尝试过的代码（同样，它非常适合在同一列表中重新排列）

<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
    <v-layout column fill-height>
      <h1>This is an about page</h1>
      <v-layout row fill-height>
        <v-flex xs4>
          <draggable class='dragArea' v-model='peopleList'>
            <div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
        <v-flex xs4>
          <draggable class='dragArea' v-model='employeeList'>
            <div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
      </v-layout>
    </v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'About',
  data () {
    return {
      employees: [{ id: 6, name: 'Pete' },
        { id: 7, name: 'Pat' }],
      people: [
        { id: 1, name: 'Bob' },
        { id: 2, name: 'Mary' },
        { id: 3, name: 'Jane' },
        { id: 4, name: 'Alex' },
        { id: 5, name: 'Jim' }
      ]
    }
  },
  components: { draggable },
  computed: {
    employeeList: {
      get () {
        return this.employees
      },
      set (value) {
        this.employees = value
      }
    },
    peopleList: {
      get () {
        return this.people
      },
      set (value) {
        this.people = value
      }
    }
  }
}
</script>
<style>
div.dragArea {
  border: 1px solid black;
  min-width: 100px;
}
</style>

Answer 1

options参数适用于draggable组件，而不适用于该元素的子代。如果将options添加到draggable，它将按预期工作。

<draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
  <div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
</draggable>

Answer 2

语法在2.20中更改。您应该现在使用group="<name>"属性：

    <draggable class="dragArea" v-model="peopleList" group="people">
      <div v-for="person in peopleList" :key="person.id">{{ person.name }}</div>
    </draggable>

Vue.Draggable不允许我在列表之间移动项目

2 个答案: