Vue.js

Question

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

列表 1 中的项目必须可拖放到列表 2 中，并与其中一个警告方块合并

问题是：我正在 google 寻找一些东西，但是我找不到允许我拖放和合并的东西。至少，我没有经验。

有人有什么建议吗？非常感谢！

真诚的，雨果·阿尔维斯

Answer 1

您可以试试这些库：

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。

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

Vue.js - 拖放/合并