Есть ли способ перетащить элементы в группу на Vue Js - PullRequest
Новая
       39

Есть ли способ перетащить элементы в группу на Vue Js

0 голосов
/ 10 апреля 2020

Мне удалось перетащить каждый список, используя код ниже. Есть ли способ перетащить весь список, как в групповом формате? Список имен в моем коде определяется 7:00 вечера. Есть ли способ перетащить 7:00 вечера, который будет включать в себя весь {{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++ }];
  }
 }
...