问题标签 [vuedraggable]

我正在尝试制作 3 个列表。在每个列表中都有可以相互拖动的卡片。问题是卡片粘在上面的卡片上，当我尝试保存更改时，将卡片放在上面，并显示相同的列表。

其实我不懂vue。这是我第一次使用它。

这是带有拖动的卡代码：

我把卡片做成了一个组件，这个是索引组件

我想要的是我可以用一个新列表保存卡片的位置并且它不会粘住。

代码和框链接

https://codesandbox.io/s/vue-template-qoo66

分步场景

我正在构建一个仪表板，其中网格的每个可拖动图块都包含一个图形。图表是使用 chart.js 绘制的。虽然我可以通过拖放更改图块的顺序，但如果图块包含 chart.js 图形，则不会显示被拖动图块的浮动参考图块。这只发生在 Chrome 浏览器中。对于 Firefox 和 Edge 浏览器，它可以正常工作。

实际解决方案

唯一找到的解决方案是在拖动之前隐藏图表。

预期解决方案

如果我可以避免在拖动图块时隐藏图表，那就太棒了。

Firefox 和 chrome 的结果如下所示。闪烁的故障是屏幕录制工具中的一些错误，请忽略这一点。

结果在 Firefox67 (Arch Linux)

结果Chrome74（Arch Linux）隐身窗口没有任何扩展

来自CodeSandbox的示例中不同浏览器的可视化结果。

这两个结果都是使用在 Arch Linux 上运行的 Chrome74 和 Firefox67 实现的。我在 Windows 中对 Chrome 有相同的结果，但现在无法确认版本。

我还尝试了适用于 MacOS 的 Chrome75。显示了浮动磁贴，但是在启用图表时它错位在页面框架之外。

为我的问题寻找解决方案！

我尝试让 Vue.Draggable 与 VueFire 一起工作。我有一些带有卡片的列表，可以在它们之间拖动、排序、克隆等等。虽然列表中填充了卡片，但 Vue.Draggable 可以完美运行，它会监视变化，触发魔法等事件。

这是工作的 JSON：

当列表中的一个为空时，问题就来了。我们都知道 Firebase 不存储空属性，这就是为什么 Vue.Draggable 不能监视不存在的属性。例如像这样：

该cards属性应该通过将项目拖动到列表中来填充值，但是由于cards不存在 Vue.Draggable 无法监视该列表中的更改并且无法触发事件。

有没有办法创建某种占位符或中间件来模拟那个空数组？或者在这种情况下还有哪些其他可能的解决方案？

这是一个小的JSFiddle。

谢谢！

我正在尝试实现 vue 可拖动，它几乎似乎可以工作，除非我尝试在按钮上实现它。每当我尝试移动按钮时，它都会给我一条错误消息。

这是一个例子：https ://codepen.io/anon/pen/xoQRMV?editors=1111

任何帮助表示赞赏。

以此为例
https://sortablejs.github.io/Vue.Draggable/#/clone

想象这是一个购物网站，
“Draggable 1”是商店中可用的商品
，“Draggable 2”是用户购物车。

用户应该能够将一个项目从可用项目拖到购物车（这在示例中实现）。
但这不应该被允许重新排序可用项目，我怎样才能在同一个可拖动项中禁用拖动？

我正在尝试将 vueDraggable 与 vuetify 一起使用，以创建一个允许重新排列顺序的照片库。

如果没有 Draggable，v-img 会正确加载图像。
在我添加可拖动对象后，图像不会被加载。
为了测试图像路径是否正确，我在下面添加了一个并且加载正确。

https://codepen.io/brian661/pen/zVygap/

我编写了一个在整个应用程序中共享的组件，在某些地方我需要拖动/排序，而有些地方不希望它在那里。我将 a 传递prop给我的组件调用disableDraggable并基于它应该禁用，不幸的是它没有做任何事情，我怎样才能禁用可拖动？我应该注意我尝试了选项对象语法和简单的:disable，这里是相关代码：

如何禁用可拖动功能？

我应该注意到vue-draggable（我正在使用的）据说具有相同的 apiSortableJs

我正在使用以下库 https://sortablejs.github.io/Vue.Draggable/#/custom-clone

具体使用示例： https ://github.com/SortableJS/Vue.Draggable/blob/master/example/components/clone-on-control.vue

我需要做的只是填充一个列表，即从 Draggable 1 到 Draggable 2，目前是从 Draggable 1 到 Draggable 2 以及从 Draggable 2 到 Draggable 1 但我不需要那样。

谢谢

我正在将一个项目从一个列表拖到另一个列表中以添加或删除。

我想在将拖动的项目添加到列表之前打开一个弹出窗口。

我已经使用了@drop 事件来做，但是只有在拖动的项目被拖放到列表中之后才会触发 drop 事件。

如何在使用 Vue.Draggable 将项目拖放到列表之前显示我的弹出窗口？

我有过渡组制作翻转动画的工作代码

这与 vuedraggable 文档中的示例片段非常相似。当我添加标题插槽时，它停止工作

如果删除过渡组并只保留标题，它会再次起作用（显示标题，显然现在有动画）

如何获得标题+动画拖放？