问题标签 [vuedraggable]

为了实现这个动画 gif中所示的功能，Vue.Draggable/SortableJS 的方法是什么？

用于嵌套的 Sortable 的默认行为是将元素向上拖动到上面的元素，直到鼠标到达上面元素emptyInsertThreshold的放置区域的像素，但我希望能够通过将元素拖动到右侧来嵌套元素。取消嵌套也是如此。

我已设置emptyInsertThreshold为0禁用默认行为，现在当我将元素向右拖动时，我会触发以下事件：clone和start（按此顺序）。

但是我该怎么做：

1. 当鼠标向右移动了预定义的距离时可以得到通知吗？
2. 通知 Vue.Draggable 幽灵元素应该作为子元素嵌套到我在其下进行水平移动的元素？

使用 Vuetify 和 VueDraggable，我试图使 VListGroup 下的项目可拖动。

关于代码，我想做的是从这里到那里（在此代码笔中不能拖动组中的 atm 列表项）。

没有 VListGroups：

模板

数据

使用 VListGroup

模板

数据

我的问题是，我似乎无法将 VListGroup 的激活器插槽与 VueDraggable 的组件数据道具一起使用......

关于如何实现这一目标的任何想法？

谢谢你。

在这里，我试图实现从排名列表中克隆一个元素并将其放入两个列表（list1 和 list2）中的任何一个中。一切似乎都正常，我可以拖放，但看起来绑定不起作用，因为两个列表不受影响，因为当我将元素拖动到列表时，观察者不会运行。此外，克隆功能不会将消息打印到控制台。我用这个例子作为参考。

我正在构建一个链接构建器，让人们从一个链接共享多个链接。目前我有几张“卡片”，用户可以将它们放入他们的链接模板中。例如，这允许他们在 Spotify 上拥有指向其音乐的链接（一张卡），或指向他们的 Youtube 频道的链接（另一张卡）。

我正在使用 VueDraggable 允许用户将他们的卡片拖到他们的模板中。

我不明白的是，我应该如何将卡片组件存储在商店中以便它们可以拖动？目前在我的商店中，我只是将所有卡片作为对象，因为 VueDraggable 需要将数据放在 2 个不同的列表中。

所以我实际上并没有使用我制作的任何卡片组件。我希望能够将卡片设计为组件，而不仅仅是我商店中的对象，并且仍然可以拖动它们。我该怎么做呢？

导入 sortableJs/vuedraggable 时出现错误TS class component。

vuedraggable与标准一起使用时，JS standard component它工作正常。

这是我的带有标准 JS 组件的 vuedraggable ：

一切正常，没有错误。

这是我的带有TS 类组件的 vuedraggable ：

这里发生错误

找不到模块“vuedraggable”的声明文件。

隐含地具有“任何”类型。尝试npm install @types/vuedraggable 它是否存在或添加一个包含 `declare module 'vuedraggable 的新声明 (.d.ts) 文件

所以我做了 ：

npm 错误！404 '@types/vuedraggable@latest' 不在 npm 注册表中。

如何在 Typescript CLass 组件中使用 vuedraggable？

我一直在尝试创建一个计算数组，然后使用 v-if 进行渲染。但它也需要与 v-model 一起使用。它需要 v-model 的原因是因为它是使用 vuedraggable 的可拖动列表的一部分。

目前我收到以下错误Computed property "list" was assigned to but it has no setter.

以下代码是我的 drag.vue 组件：

上下文：我正在尝试创建一个将多个数组合并为一个的应用程序。随机化数组。然后用户可以把它放回去，然后看看他们是否做对了。

我正在使用 Vue draggable 在类别之间拖动列表：

由于内部可拖动组中的组，我可以在类别之间拖动。但是外部可拖动不起作用，没有调用更改方法。当我改用更改时，类别确实被移动并且该函数被调用但循环中的索引没有更新。

表示：初始 0(A,B) - 1(C,D) - 2 (E,F) 我将切换 0 和 1：预期：0(C,D) - 1(A,B) - 2(E ,F) 现实：1(C,D) - 0(A,B) - 2(EF)

所以我无法将新索引发送到数据库，这意味着，当我移动类别并刷新时，它又回到了初始状态。

我一直在努力完成这件事，但似乎无法让它发挥作用。我正在使用 Quasar CLI，如果有人可以向我展示如何执行此操作的示例，我将不胜感激。

我尝试通过在标签道具中传递组件来使用类星体组件，但这似乎不起作用。因此，任何建议将不胜感激。

我正在为一张桌子构建一个 Livewire 组件。我希望行是可排序的，所以我试图VueDraggable在我的 Livewire 组件中实现。

在我的LivewireTable组件上，我定义了一个名为$records.

在视图中，我使用的vue-draggable是这样的：

当我检查 Vue 组件时，值是null，这意味着 Livewire 没有做它应该做的事情。

我确定我做错了什么。任何人都可以帮忙吗？提前致谢。

我正在使用 vue-draggable 实现拖放：https ://github.com/SortableJS/Vue.Draggable 。

有没有办法在拖动元素时限制元素的高度？否则，当该部分在浏览器本身之外展开时，每当执行拖动事件时，它看起来很奇怪。