Vue.js-拖放/合并

Question

我是初学者学习Vue.js框架。 我已经使用Bootstrap创建了一个GUI，现在我正在使用vue进行重写。 但是我要解决一个问题：我需要列出2个列表，其中1个是可拖动的，才能放在另一个列表中。当我进入另一个列表时，我应该能够将此可拖动信息合并到第二个列表的内容中：

列表1中的项目必须是可拖动的，并且必须拖放到列表2中，并与警报方块之一合并

问题是：我正在google上寻找东西，但是我找不到允许我拖放，合并的东西。至少不是我缺乏经验。

有人有什么建议吗？我真的很感激！

此致， 雨果·阿尔维斯（Hugo Alves）

Answer 1

您可以尝试使用这些库：

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

Answer 2

@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中删除该项目时，我都会收到一条警报，其中包含该项目的ID。

我的英语不太流利，所以我对语法错误感到抱歉。但是，谢谢您的建议！