问题标签 [vuedraggable]

我在 nuxt 2.13，vuetify 2，vuedraggable 2.24。我想从事件列表中拖放到我的布局结构中。但这里有问题：

1- 我的布局与下图不同。首先我选择布局，然后将我的事件放入其中。

2-当我将元素拖动到布局时，我想检测将其放置在何处以突出显示边框。

3- 放置后不会显示布局内的元素（嵌套），而是向后端发送请求并将响应图像和标题放入其中。

哪个methods，props我@event应该用于每个部分。例如，在#2 中，我如何才能找出我正在下降的位置以突出显示它的边框？

我选择的布局，例如：

或者

我的实际拖放：

注意： 正如我之前提到的，我不是在找人为我编码。我只是想知道 VueDraggable 是否有可能以及什么是助手events和methods. 谢谢

我正在尝试在 Vue 中创建某种文件夹和文件系统。

我想让它做什么

当用户选择一个项目并将其拖到另一个项目上时，它会显示 2 个 div。一个 div 表示“交换位置”，另一个表示“放入文件夹”。根据这些 div 的哪个 od，用户放开鼠标按钮将执行所选操作。

它能做什么

当我将一个项目拖到另一个项目上时，Vue dragable 只会对项目进行自动排序。无法检测到诸如 mouseover 之类的事件来显示提到的 div。

例子

我正在尝试使用 vue draggable 将项目从一个列表移动到另一个列表，但列表位于组件内部，我无法让它工作。这些项目能够在列表内移动，但不能从一个列表移动到另一个列表。

我有一个包含所有列表的 Board 组件和一个包含可拖动项目的 List 组件。

这是板组件：

这是 List 组件：

有人能告诉我这个光标来自 Sortable.js 的什么地方吗？我浏览了所有的 CSS 文件和 JS 文件，找不到这个光标的来源。我希望在它上面使用cursor: grab;和cursor: grabbed样式。

另外，我在生产中使用 Vue Draggable，但我相信这是从 Sortable.js 继承的。

光标示例

我的应用程序结构看起来像这样

每列都有一个<draggable>围绕任务的组件。在应用程序级别，我有一个数据对象，其中包含不同的列，每列都有其任务。

我遍历列，并将对象绑定到组件：

Kool Column 组件：

所以，我的问题是，当我拖放卡片时，会收到 Vue 错误/警告：

有道理，我一直在阅读和调查，在 Vue 中，您想使用 props 将数据向下传递到组件中，但是为了修改这些数据，您向父级发送一个事件，并让父级对其进行修改。

好的，但是我正在使用Vue Draggable的库修改了我通过它的列表。所以我该怎么做？我认为的解决方案：

1. 在挂载列组件时，将道具卡复制到组件的数据中，将其用于列表和修改，每次更改时，将新列表发送给父级。我认为这没有多大意义，我会有两个信息来源（app 对象中的卡片和我的列组件对象中的卡片），并且存在它们未对齐的风险，毕竟我正在更新列表分别地。
2. 删除项目时，使用库实际上“不允许”删除（您可以使用库事件并返回 false，因此它实际上不会更改列表）。捕捉事件，将拖动的项目的信息发送给父级，用户是否试图放下它并相应地更改数据。基本上，我会使用拖放库来了解用户试图将某些东西放在哪里，并实际手动更改数据。这看起来也很奇怪，代码真的很难理解，并且在放下物品时会闪烁（因为它会回到原来的位置，然后回到你想要的位置）。
3. 另一个不好的解决方案是传递给列组件，而不是单独的 v-bind 和每个属性，而是整个对象。因此，实际上使 Vue 警告消失并保持双重数据绑定的不是v-bind="colum"我这样做。:column="column"问题是，我正在做反模式，没有警告，但仍然......（顺便说一句，这种方法来自这个例子：Task management using Vue）

我应该继续使用方法#2吗？，丑陋但至少不是反模式，也不会加倍信息。或者当我不在“控制”正在更新的列表时，是否有另一种保持双重数据绑定的方法？或者也许只是应用程序的不同架构/结构？

dragAndDrop我尝试过使用&拖放performAction，但没有一个适用于 Vue.Draggable Web 应用程序（例如vuedraggable: Two Lists）。

如果可能，任何人都可以分享解决方案吗？

示例代码：

我需要 vuedraggable 组件的帮助。我有三列。（插入照片）我想在列之间拖动 BoardUserCard，并想向数据库发送 PUT 请求以更改与删除的列相关的“lead_status_id”。我怎样才能做到这一点？我在文档中找不到任何关于 api 的示例。

我是 vue 新手，我正在尝试在我的 vue 应用程序中实现可拖动功能。在这个应用程序中，我使用 vuex、axios 和vuedraggable 包。

这是我的模板和脚本截图

这是脚本部分

我不知道在哪里指定 updateGlobalTodo 方法。我可以使用 patch 方法代替 put 方法来更新吗？

vuex 脚本在这里

这是响应数据格式

Vuetifyv-data-table支持多种类型的插槽v-slot:body：v-slot:item和v-slot:item.<name>.

我们一直在v-slot:item.<name>广泛使用，因为它们提供了一种灵活的方式来设置和处理各个列中的内容，并允许以编程方式更改表头。

我想为我的v-data-table行添加可拖动性，并使用Vue.Draggable 让它工作。

但是该draggable组件需要使用v-data-table v-slot:bodyie来控制整个表格，从而失去了灵活性v-slot:item.<name>。

有没有办法可以将这两个组件一起使用并提供v-slot:item.<name>支持？

我有一个与 相关的特殊问题vue draggable，这也可以看作是一个一般性问题，与数据结构（数组）有关。（例如： vue-draggable-test）

Vue draggable 用于对数组元素重新排序——所以你必须使用数组。

在我的应用程序中，您可以向每个组添加/删除项目，并且可以重新排序组。

目前我的数据结构是一个由项目（对象）数组组成的数组，每个数组属于某个组。

每个组都有某些设置，例如“最大项目数”（或 numElements），存储在单独的配置对象中：

问题是在循环组和项目时，我如何跟踪它属于哪个组？（因为它是一个数组）？

以前（在使用 vue draggable 之前），我使用了一个对象：

可以与配置对象匹配。

但是如果组和项目被组织成数组，则没有指示它们属于哪个组（除了任何现有项目具有可以检查的“groupName”属性）。

最初数据组可能是空的，因此它们没有标识。初始数据组的数量应由配置对象确定。

我做了一个例子来说明这个问题：vue-draggable-test

这只是为了演示它是如何循环的（来自我的示例）：

那么如何更改数据结构或进行其他更改来解决此问题，同时仍保留拖动/重新排序功能。有没有我错过的传统解决方案？