问题标签 [vuedraggable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1180 浏览

element-ui - 您如何使用 element-ui-el-table-draggable、Element UI 拖动列?

我正在使用插件:https ://github.com/WakuwakuP/element-ui-el-table-draggable 但我只看到一个拖动字段的示例。

在模型中我有这样的:

我正在将句柄类应用于包含但它对我不起作用的 div,我该如何拖动列?

0 投票
1 回答
57 浏览

vue.js - vuedraggable 和 apollo 突变的问题

在我的项目中,我正在使用Django- graphene-django (graphQL)- Apollo- VueJS-Vuetify并且对于我尝试使用的拖放问题Vuedraggable。我实际上正在尝试构建一个带有列和卡片的看板,以便从列移动到列(类似 Trello)。问题是当我不运行任何 Apollo 突变时它运行良好。

所以你可以看到我的初始状态:

在此处输入图像描述

:list如果除了提供and之外我不做任何事情group='...',它会起作用:

在此处输入图像描述

但是当我提供一个@change="..."带有阿波罗突变的方法时,它就不再起作用了,它会这样做:

在此处输入图像描述

我的数据结构如下:

有多个阶段(New、In Progress、Done),每个阶段都可以有多个票(Stage 1-n Tickets)

这是我的消息来源:

我的模板(我省略了诸如样式类和列标题之类的纯视觉内容以使其更清晰):

我的change方法:

CHANGE_HELPDESK_TICKET_STAGE_MUTATION突变:

石墨烯-django 被称为:

奇怪的是,没有突变,它会正确移动。当我添加突变以在 DB 中有效地更改它时(正确完成),它会执行这个奇怪的“克隆”。我认为问题出在阿波罗缓存中,因为当我将内容打印到控制台时,在该change(...)方法中一切正常:

实际上,在change(...)方法结束时,我运行:

这给了控制台:

在此处输入图像描述

所以我们可以看到它是正确的,每个阶段有 1 张门票。但它在“新”阶段显示 2 张门票!

我添加了一个测试按钮来运行完全相同的代码:

当我们在控制台中检查结果时,我们可以看到:

在此处输入图像描述

在“新”阶段有 2 张票,在“进行中”阶段有 1 张票,而每张票应该是 1 张……当然,如果我按 F5,它会运行查询并在 DB 中检索正确的信息并纠正展示。

同样在这部分:

如果我检查缓存,我们还可以看到“新”中有 2 个,“进行中”中有 1 个。

有人能告诉我为什么会这样吗?我的意思是当没有突变时,列表会正确更改。突变应该只是为了在 DB 中有效地改变它。

提前致谢 !

0 投票
1 回答
989 浏览

vue.js - 样式化 Vuedraggle 元素

我正在使用vuedraggable构建看板(类似 Trello),它工作正常,但我坚持按照我想要的方式设计它。

事实上,我想要这种动画(链接):

在此处输入图像描述

所以我希望能够:

  • 移动卡片本身,而不是自身的某种影子副本
  • 像这样设置放置占位符的样式。

我应该针对哪些类进行修改(使用 css)?在我看来,文档中的内容不是很清楚。

提前致谢 !

0 投票
1 回答
198 浏览

vue.js - 可拖动 | 将参数传递给 :move

有没有办法将参数传递给 :move 事件,例如:

然后能够将其与以下事件一起使用:

0 投票
1 回答
110 浏览

vue.js - 为什么在拖放时盒子的元素不会从一个盒子移动到另一个盒子?

我正在使用 Vue draggable 并且在将元素从一个框拖动到另一个框时,它正在移动到同一个框,但不能在其他框中放置/移动。假设我想将'1' 从 box 1 移动到 box 2。它不可拖动到另一个框。为了显示数据在数组中的方式,我使用了显示数据按钮来记录数据。检查元素的顺序。

这里有什么问题?

在此处输入图像描述

VUE 代码

0 投票
1 回答
127 浏览

android - 如何获取可拖动标记的坐标andorid?

下午好,我正在实施地图,您可以输入我的标记位置,但是移动到另一个位置时如何获得标记的新纬度和经度

0 投票
0 回答
558 浏览

javascript - 使用 vuedraggable 的 Vue 组件导致 TypeError

我似乎无法让可拖动组件正常工作。

我得到的错误是:

我曾尝试阅读此内容,但信息有限: https ://github.com/SortableJS/Vue.Draggable/issues/738

我在下面发布了一个示例代码,希望得到一个指针。

main.js

应用程序.vue

可拖动的.vue

0 投票
0 回答
86 浏览

vue.js - 我可以使用 Vue.Draggable 从操作系统中拖动文件吗?

我正在尝试在我自己制作的上传放置区内使用 Vue.draggable。

问题:

<draggable></draggable>是在里面dropzone,所以如果我开始从数组中拖动一个列表项,draggable它将触发dropzone拖放事件而不是draggable那些。此外,将文件从操作系统拖到<draggable></draggable>打开它们,它不会将它们添加到列表中。

仅当我将文件从操作系统拖到dropzone

Vue文件:

有人可以指出我如何加入两者的正确方向吗?

0 投票
1 回答
103 浏览

vue.js - 如何将 vuedraggable 用于处理 Vuex 中嵌套数据数组的数据的嵌套组件?

I have a list of objects that can each have their own list of children down to any level, and they can be dragged anywhere within the list of object trees. The data is stored in Vuex and I have the draggables bound to a computed property with a getter and setter (the setter splices in/overwrites the list).

The issue I'm having is when I drag an item anywhere below the first level of the same tree, it disappears, UNLESS I am reordering it amongst siblings on the same level. It seems to work fine to drag it anywhere else so long as it's not within the same tree. This makes me suspect it's a mismatch in timing as the events are emitted up the tree structure, but at the same time it's always removed and never appears in the new location whether it's dragged down or up further in the tree.

我想知道这是否是因为当嵌套对象更改时在树上发出更新事件,而不是更新和提交更新到顶层的 Vuex 存储。我在设置器中正确记录了更改,但它似乎在数据后立即被覆盖并从 dom 中消失。

这是其他人遇到的吗?有人可以解释操作顺序,也许我有一个删除更新覆盖添加更新的问题?

0 投票
1 回答
1287 浏览

vue.js - [Vue.Draggable]我只想拖动表格的部分列

我希望能够使用这个库只拖动一些列。 https://sortablejs.github.io/Vue.Draggable/#/table-column-example

我想要做的是有一个有两行的标题,并且只允许拖动一些列。然而,现在这是不可能的。

  • handle(item-handle) 指定的元素可以移动,但结果不会改变。
  • 错误输出到控制台。
  • 显示不受拖动的列,以便可以通过拖动更改其位置。

我怎样才能消除这些问题?


版本

  • “vue”:“^2.6.11”
  • “vuedraggable”:“^2.24.0”
  • “引导程序”:“^2.16.0”

Vue 源码