问题标签 [vue.draggable]

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 投票
2 回答
2861 浏览

javascript - Vue.Draggable un-choose 的事件是什么?

我知道有可供选择的事件,但不确定我应该使用什么来取消选择/取消选择,对于我的用例,我不能使用@end事件。

这是我所指的文档。
https://github.com/SortableJS/Vue.Draggable#events

0 投票
1 回答
6328 浏览

javascript - Vue.Draggable 通过拖入指定区域删除项目

我一直在用头撞墙试图弄清楚这一点。我在这里通过 Sortable.js 库 repo 找到了一个几乎正是我正在尝试做的示例,但我无法使用Vue.Draggable来实现它。

我如何做到这一点的理论是添加一个与其余元素<draggable/>相同的元素并侦听其上的事件,然后从其列表中删除该拖动的元素。group@add

一个问题(也许)是我试图将“垃圾”按钮指定为删除区域,如果它引用相同的 draggable group,则被拖动的元素会附加到按钮组并抛出整个 UI。所以,一个非常重要的事情是存在某种用户反馈(例如,当拖动元素悬停时,垃圾桶图标变为红色),但拖动的元素不应该插入到按钮组中。

初始拖动状态

将鼠标光标悬停在要删除的项目上

预期删除操作

在此处输入图像描述

提前致谢!

0 投票
1 回答
1965 浏览

vue.js - Vue.Draggable 拖放到同一个数组

我正在尝试将相同的数组拖到数组请检查我的代码并让我在哪里做错了。工作了将近 10 个小时,但没有找到任何解决方案。感谢您的帮助。

0 投票
1 回答
4104 浏览

javascript - VueJS:在 Vue.Draggable 和 VueX 中使用计算的“set/get”

我正在寻求“Vue.Draggable”的帮助。第二天我试图正确更新可拖动数组。

挑战在于:

  • 使用计算的 set/get 函数更新可拖动数组
  • 获取可拖动项目属性,包括有关父项目的信息并调用 axios 函数来更新 MySQL 上的数据。

数据样本:

渲染代码:

我正在尝试做的事情:

实际上,提到的建筑工作正常。但只是视觉上的。VueX 给出了关于突变过程的错误。

替换v-model:valuehelp 但在这种情况下,D&D 甚至在视觉上都无法正常工作。

我尝试了很多变体......一个是 - 为“类别”创建一个计算属性并使用“get/set”函数actions->mutations从它们中调用。问题是 -当我们更改数组结构categories->set时,函数不起作用。authors

第二个问题是以这样的方式拖放,authorcategories允许我们获取作者和类别 ID 以在Axios查询中使用它。

我试图使用@end事件 BUT(!) 它仅适用于排序过程,但不适用于父元素(类别)之间的 D&D。

我将非常感谢任何帮助!

0 投票
1 回答
333 浏览

vue.draggable - 是否可以为 vue.draggable 设置默认选项?

我想知道是否可以为 Vue.draggable 设置默认选项?目前我发现我需要为每个可拖动的选项提供选项,当一些(如手柄和滚动灵敏度)可以更好地全局设置时。

请原谅 HAML。

0 投票
1 回答
1677 浏览

javascript - 拖动一个元素但放下一组其他元素

我正在使用基于SortableJS库的Vue.Draggable库。

在我的代码中,我有 2 个可拖动列表,但我有第三个没有与简单元素合并的列表。

第三个列表有一个对象数组,每个对象都有一个端点条目,当我放下我的元素时,我想做一个从端点获取对象数组并将其与目标列表合并的函数。

这是小提琴

0 投票
1 回答
4950 浏览

javascript - Vue.Draggable 不移动组件

所以我正在努力使用我正在开发的迷你页面构建器。我正在处理以下代码:

JavaScript/Vue 代码: http: //git.dannysmc.com/snippets/63 - 也粘贴在下面:

HTML / Twig 代码:http://git.dannysmc.com/snippets/64 - 也粘贴在下面:

行按预期移动,因此我可以按预期完全移动行并对它们进行排序,它可以正常工作并正确更新数组。但是当我尝试移动组件时,它似乎按预期移动,所以你可以移动它,但是当你松开拖动时,它不会停留在那里,而是恢复到原来的样子。

我环顾四周,但找不到任何修复它的方法。

我真的很想做什么,所以任何建议或帮助都会很棒,在此先感谢。

0 投票
1 回答
1143 浏览

javascript - 如何挂钩到 SortableJS 的拖动事件

我正在尝试从SortableJS库(1.8.4)中连接到 dragover/touchmove 事件。元素可以很好地拖动和交换,但监听这些事件不会触发我提供的回调函数。

用例是,如果可拖动对象在 之外swapThreshold,但在目标上方,则应该能够将其拖放到目标上而无需与之交换位置。一旦可拖动对象到达swapThreshold,它应该像往常一样交换位置。

(评论只是为了清楚起见)

我考虑了一个解决方案,move但仅在交换发生后调用,或者如我上面关于该invert-swap属性的评论中所述不可靠

注意:我使用的是Vue.Draggable (2.20),但如果直接使用SortableJS,这也应该适用

0 投票
1 回答
234 浏览

vue.draggable - 在 onAdd/onChange 事件之前钩子将删除的项目添加到列表中

我有两个列表(使用 cue-draggable),一个源列表和一个配置(排序)列表。将项目从源列表拖放到配置列表时,我想在将数据添加到配置列表之前对其进行转换。

我目前正在使用 onChange 事件,因为我想访问实际的 JSON 项目,我使用 JS 拼接函数删除已添加的项目,然后转换数据并插入到配置列表中。这可行,但我更愿意在任何插入目标列表之前转换数据。

0 投票
1 回答
9663 浏览

ruby-on-rails - Vue.draggable 获取被拖动项和列表ID

我已经阅读了我能找到的所有文档和 stackoverflow,但仍然有这个问题。

我正在使用 Vue 和 Rails 构建一个 Trello 克隆。

我有很多可拖动的列表。

每个列表都有可拖动的卡片。

当我将卡片从一个列表拖到第二个列表时,如何将其保存到我的 ajax rails 端点?

我试过使用@end方法和:move道具,但运气为零。