Vue.js - Drag n Drop / Merge

Question

Я новичок в изучении фреймворка Vue.js.Я создал графический интерфейс с помощью Bootstrap, и теперь я переписываю с использованием Vue.Но я борюсь с одной проблемой: мне нужно составить 2 списка, из которых 1 из них можно перетаскивать, чтобы бросить в другой список.Когда я опускаюсь в другой список, я должен иметь возможность объединить эту перетаскиваемую информацию с содержимым второго списка:

Элемент из списка 1 должен быть перетаскиваемым и отброшен в списке 2, сливаясь с одним изквадраты оповещений

Проблема в том, что я ищу что-то в Google, но не могу найти то, что позволяет мне перетаскивать, перетаскивать и объединять.По крайней мере, не из-за моего отсутствия опыта.

У кого-нибудь есть предложения?Я был бы очень признателен!

С уважением, Уго Алвес

Answer 1

@ elalamianas Я нашел способ решить мою проблему с помощью vue.draggable.

Для списка элементов перетаскивания я использовал этот код в HTML:

<draggable v-model="List1" :options="{group:{name:'LIST1.name', pull:'clone'}}" @start="drag=true">

Для места размещения, поскольку я хотел клонировать элемент списка 1, а затем объединить его с элементом списка 2, я использовал:

<draggable v-model="List2" :options="{group:{ put:'LIST1.name'}}" @add="onAdd">

Я использовал следующий скрипт:

 onAdd: function (evt) {
      console.log(evt)
      alert(evt.clone.id + ', ' + evt.path[1].id)
  },
  components: {
    draggable
  }

Итак, каждый раз, когда я удаляю элемент из списка 1 в списке 2, я получаю оповещение с опущенным идентификатором элемента.

Мой английский не говорит свободно, поэтому я извиняюсь занеправильная грамматика.Но спасибо за ваше предложение!

Answer 2

Вы можете попробовать эти библиотеки:

• https://github.com/SortableJS/Vue.Draggable
• https://github.com/RubaXa/Sortable