有没有办法在Vue Js上拖动组中的项目

Question

我能够使用下面的代码拖动每个列表。有没有一种方法可以将整个列表拖动为组格式？我的代码中的姓名列表是在7：00 PM定义的。是否有一种方法可以拖动7:00 PM，其中将包括整个{{element.name}}或整个名称列表？

这是我的Vue，它显示数据和方法中的所有名称列表

<b-col lg="3">
  <b>RESERVATIONS</b>
  <b-row>
    <b-col>
     <br />
      <b>7:00 PM</b>
        <draggable :list="dataList3" class="list-group" draggable=".item" group="a">
           <div class="list-group-item item" v-for="element in dataList3" :key="element.name">
              {{ element.name }}
           </div>
           <div slot="footer" class="btn-group list-group-item" role="group" aria-label="Basic example">
           </div>
        </draggable>
    </b-col>
  </b-row>
</b-col>

这是从上方接受名称列表的视图/ div

<draggable id="first" data-source="juju" :list="list" class="list-group" draggable=".item" group="a">
   <div class="list-group-item item" v-for="element in list" :key="element.name">
      {{ element.name }}
   </div>
</draggable>

名称列表数组及其方法

import draggable from "vuedraggable";
let id = 1;

export default {
  name: 'App',
  components: {
    draggable
  },

data() {
  list: '',
  dataList3: [
    { name: "John", id: 0 },
    { name: "Joao", id: 1 },
    { name: "Jean", id: 2 },
    { name: "Sacar", id: 3 },
    { name: "Zalan", id: 4 },
    { name: "Sonica", id: 5 },
},

 methods: {
  add: function() {
    this.list.push({ name: "Juan " + id, id: id++ });
  },
  replace: function() {
    this.list = [{ name: "Edgard", id: id++ }];
  },

  add2: function() {
   this.dataList3.push({ name: "Juan " + id, id: id++ });
   },
  replace2: function() {
   this.dataList3 = [{ name: "Edgard", id: id++ }];
  }
 }