Vue.js - 拖放/合并答案

【问题标题】：Vue.js - Drag n Drop / MergeVue.js - 拖放/合并
【发布时间】：2019-03-07 11:34:26
【问题描述】：

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

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

问题是：我正在谷歌上寻找一些东西，但是，我找不到允许我拖放和合并的东西。至少，不是因为我缺乏经验。

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

真诚地，雨果·阿尔维斯

【问题讨论】：

【解决方案1】：

你可以试试这些库：

【讨论】：

【解决方案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。

我的英语不流利，所以我很抱歉语法不正确。不过，谢谢你的建议！

【讨论】：