问题标签 [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.
element-ui - 您如何使用 element-ui-el-table-draggable、Element UI 拖动列?
我正在使用插件:https ://github.com/WakuwakuP/element-ui-el-table-draggable 但我只看到一个拖动字段的示例。
在模型中我有这样的:
我正在将句柄类应用于包含但它对我不起作用的 div,我该如何拖动列?
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 中有效地改变它。
提前致谢 !
vue.js - 样式化 Vuedraggle 元素
我正在使用vuedraggable
构建看板(类似 Trello),它工作正常,但我坚持按照我想要的方式设计它。
事实上,我想要这种动画(链接):
所以我希望能够:
- 移动卡片本身,而不是自身的某种影子副本
- 像这样设置放置占位符的样式。
我应该针对哪些类进行修改(使用 css)?在我看来,文档中的内容不是很清楚。
提前致谢 !
vue.js - 可拖动 | 将参数传递给 :move
有没有办法将参数传递给 :move 事件,例如:
然后能够将其与以下事件一起使用:
android - 如何获取可拖动标记的坐标andorid?
下午好,我正在实施地图,您可以输入我的标记位置,但是移动到另一个位置时如何获得标记的新纬度和经度
javascript - 使用 vuedraggable 的 Vue 组件导致 TypeError
我似乎无法让可拖动组件正常工作。
我得到的错误是:
我曾尝试阅读此内容,但信息有限: https ://github.com/SortableJS/Vue.Draggable/issues/738
我在下面发布了一个示例代码,希望得到一个指针。
main.js
应用程序.vue
可拖动的.vue
vue.js - 我可以使用 Vue.Draggable 从操作系统中拖动文件吗?
我正在尝试在我自己制作的上传放置区内使用 Vue.draggable。
问题:
<draggable></draggable>
是在里面dropzone
,所以如果我开始从数组中拖动一个列表项,draggable
它将触发dropzone
拖放事件而不是draggable
那些。此外,将文件从操作系统拖到<draggable></draggable>
打开它们,它不会将它们添加到列表中。
仅当我将文件从操作系统拖到dropzone
Vue文件:
有人可以指出我如何加入两者的正确方向吗?
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 中消失。
这是其他人遇到的吗?有人可以解释操作顺序,也许我有一个删除更新覆盖添加更新的问题?
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 源码