Vue.js - 拖放/合并

Posted 2023-05-08

【中文标题】Vue.js - 拖放/合并

【英文标题】：Vue.js - Drag n Drop / Merge

【发布时间】：2019-03-07 11:34:26

【问题描述】：

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

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

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

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

真诚地， 雨果·阿尔维斯

【参考方案1】：

你可以试试这些库：

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

【参考方案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。

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