Vue.Draggable не позволяет мне перемещать элементы между списками

Question

Попытка следовать этому руководству , но с двунаправленным перетаскиванием между контейнерами.Сводя проблему к минимальному набору кода, я могу сортировать внутри списка, но не между списками.Из документации у меня сложилось впечатление, что установка обоих перетаскиваемых файлов на одно и то же имя группы включит его, но, похоже, это не так.

Итак, что мне нужно сделать, чтобы разрешить перемещение элементов из одного списка в другой?Вот код, который я попробовал (который, опять же, отлично подходит для перегруппировки в том же списке)

<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

Синтаксис изменен в 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>

Answer 2

Параметр 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>