Перетащите элемент, но отбросьте массив других элементов.

Question

Я использую библиотеку Vue.Draggable, которая основана на библиотеке SortableJS.

В моем коде у меня есть 2 перетаскиваемых списка, но у меня есть третий, который не объединен с простыми элементами.

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

var vm = new Vue({
  el: "#main",
  data: {
    list: [{
      name: "John"
    }, {
      name: "Joao"
    }, {
      name: "Jean"
    }],
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }, {
      name: "Johnson"
    }],
    list3: [{
      name: "First",
      endpoint: 'http://api.com/first'
    }, {
      name: "Second",
      endpoint: 'http://api.com/second'
    }, {
      name: "Third",
      endpoint: 'http://api.com/third'
    }]
  },
  methods: {
   getAllTheFirstNames (evt) {
     // i want to do something like this
      axios.get(evt.elementDragged.endpoint)
       .then(res => {
         evt.dropList.add(res.data /* res.data is an array of names */)
        })
    },
  
    add: function() {
      this.list.push({
        name: 'Juan'
      });
    },
    replace: function() {
      this.list = [{
        name: 'Edgard'
      }]
    }
  }
});

.normal {
  background-color: grey;
}

.drag {
  background-color: green;
}

.dragArea {
  min-height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>           
  <div class="drag">
    <h2>List 1 Draggable</h2>
    <draggable v-model="list" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list">{{element.name}}</div>
    </draggable>

    <h2>List 2 Draggable</h2>
    <draggable v-model="list2" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list2">{{element.name}}</div>
    </draggable>

    <h2>List 3 Draggable</h2>
    <draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames">
      <div v-for="element in list3">{{element.name}}</div>
    </draggable>
  </div>
</div>

Вот скрипка

Answer 1

Для тех, кто собирается иметь подобную проблему, вот решение.

Сначала вам нужно поработать с @end событие, то в вашем методе вы можете получить идентификатор перетаскиваемого элемента, обратившись к атрибуту, который вы инициализируете в своем v-forв моем случае это было data-id чтобы я мог получить к нему доступ так:

let id = evt.item.dataset.id

Теперь, когда у вас есть идентификатор в вашей функции, вы можете получить массив объектов с помощью API.

Затем вам нужно добавить массив, который вы только что восстановили, во второй список с правильным индексом, для этого вам нужно получить целевой индекс второго списка и передать его в свой массив:

let index = evt.newIndex
this.secondList.splice(index, 0, ...myArray)

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

Вот весь код:

<draggable
    v-model="firstList"
    :clone="clone"
    :options="options"
    @end="onEnd">
    <div
        v-for="c in firstList"
        :key="c.id"
        :data-id="c.id">
    </div>
</draggable>

...

onEnd (evt) {
    const id = evt.item.dataset.id
    HTTP.get(`/${id}/getMyArray`)
        .then(res => {
            let myObjects = JSON.parse(res.data) // => [{...}, {...}, ...]
            let index = evt.newIndex
            this.secondList.splice(index, 0, ...myObjects)
        })
}