问题标签 [vuedraggable]

我正在使用 vue.js 中的 HTML 构建器 GUI，并且我被递归组件的更新所困扰。

我的主文件 Home.vue 中有两个拖放，一个列出可用组件（标题、问题、文本...），另一个列出您添加和克隆这些组件的位置。该拖动区域对于其内部组件也是可拖动的（一个问题可能会导致另一个问题或文本等）。我使用 vue-draggable 库和嵌套可拖动递归组件来实现这一点。

我的问题是每个组件都是可编辑的，我根本不知道如何保存这些更改。由于我将树数据作为道具传递，因此我无法在子节点中更改它，并且由于组件是递归的，因此我不确定是否向父节点发送 $emit ...我能找到的所有示例都是关于具有固定数据的简单树。

实现这一目标的最佳方法是什么？Vuex 是个好主意吗（如果是的话，是否有一个例子，因为我不知道从哪里开始）？

主页.vue

NestedDraggable.vue

例如一个组件 inputTitle.vue

我创建了一个使用 Vuetify、Vuex 和 vuedraggable 的 Vue 应用程序。通过拖放包含相关信息的 v-card 组件按预期运行，但我无法找到识别目的地的方法，以便我可以更新 Vuex Store

此处使用的数据源列表是“buckets”对象，其中包含每个任务阶段的任务数组。拖放将任务卡从源移动到目标，但我已经能够找到一种方法来识别目标列表。

请提供有关如何确定在移动后应该更新“buckets”对象中的哪些列表的建议。

谢谢

德斯

我有 2 个动态对象数组。1 代表status， 1 代表tickets。

对象的内容是：

所以用户界面是这样的......

UN ASSIGNED现在，我可以自由地从toTO DO和同样地拖动。但是，我不能将任何东西拖入IN PROGRESSand DONE。原因是该<draggable>组件有一个名为的属性:list="ticket_array"，我们知道 和 的 idIN PROGRESS不DONE存在于ticket_array.

这是我渲染它的方式...

渲染当然没有问题，但问题是我不能将任何东西拖到空类别中。任何人？

我有一个视图组件，我希望能够将某些元素 ( .draggable) 拖到其他某些元素 ( .droppable) 上，如下所示：

<div>我可以像这样为静态元素设置它mounted()：

但是，当我想在 Vue JS 中动态执行此操作时v-for，jQuery UI 绑定似乎会丢失：

我不能再拖动这些.draggable项目。

据我了解，jQuery Draggable/Droppable 无法使用，.on因为我怀疑其中一个问题是我的 DOM 元素是在 jQuery 初始化之后生成的。我尝试将我的 jQuery 代码包装进去，this.$nextTick(() => { ... })但它仍然不起作用。

我也看过Vue.Draggable但我想要拖放而不同时重新排序。

是否可以将 jQuery Draggable/Droppable 与 Vue JS 中的动态数据结合起来？

我正在尝试创建一个用户可以重新排序图像的画廊。目前，我只使用一组数字来查看这种方法是否有效。

我需要它响应 - 在移动设备上 - 它应该只有一列。

问题是这vue-draggable似乎只适用于我的一列。

您知道如何通过拖动卡片来重新排序卡片吗？

我正在尝试构建一个类似 trello 的应用程序
在我的情况下，我有一个user_list作为我的类别和ticket_list每个类别的项目。
当然，其中的每个项目都ticket_list包含一个相应的用户ID user_list。

现在我想做的是有一个静态字段UNASSIGNED，我可以将所有在.ticket_listuser_iduser_list

我的代码是这样的......

上面的代码工作正常......当然，它不会显示没有任何相应用户 ID 的所有项目。
现在，是否可以将所有不属于任何user_list类别的项目放入静态Unassigned类别中？

我在我的项目中使用 vue、vuedraggable 和 vuetify。

我无法使用 let 为我的循环定义我的索引，它总是未定义。此方法被可拖动的事件调用。但是，使用 var 而不是 let 可以。为什么 let 总是未定义？

即使我直接将变量 i 分配给 1 它仍然是未定义的。例如 for(let i = 1; i < 2; i++) 仍然导致 i 在 for 循环中等于 undefined。

这是我看到问题的地方

从这里调用此方法

这是触发呼叫的元素。

我是 Vue 的新手。我客户的 CodeIgniter 网站上的其中一个页面（salesview）需要使用 Vue，所以我通过

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

我在一个名为salesview.js. 现在，我需要使用Vue.Draggable组件。我将它添加到页面中，如下所示：

由于我没有使用 webpack，我该如何使用这个组件？

我正在尝试vuedraggable使用 Vuetify Cards 来实现，但由于某种原因，当卡片在单行中时拖放不起作用，但在它们位于列中时才起作用。

看看这个工作的 CodeSandbox。

在Parent.vue文件中，如果我移除<v-layout> </v-layout>包装<HelloWorld />组件，卡片会进入一列，并且拖放再次开始工作。

这是我的 HelloWorld 组件：-

这是我的父组件：-

如果有人可以帮助我解决这个问题，我肯定会很感激。谢谢你。

我必须在我的 vuejs 实验中遇到问题。

我的数据中有两个数组，例如：

然后我构建由这两个数组组成的对象，所以：

在我的列表对象中，我有这个结构：

我尝试在 4 列中制作可拖动项目，因此：

但它没有拖到其他列。

如何让它正确移动。

示例在这里https://codesandbox.io/s/elated-aryabhata-uslwb?fontsize=14&hidenavigation=1&theme=dark