问题标签 [vue.draggable]

我一直在使用 Vue 2 组件和 Vue.Draggable 库开发表单构建器。这很好用，除了一个持续存在的问题——对于最终用户来说，嵌套块实际上很难嵌套。要让一个块缩进另一个块，需要大量的精确度和反复试验。

如何解决此问题并使其更易于使用？看起来几乎是因为缺少放置区。

（链接到 Imgur，因为无法嵌入动画图像）

请注意，由于多文件性质，我无法在 CodePen 中运行代码。该代码还依赖于 UI 的 TailwindCSS。

/FormBuilder.vue

/FormBuilder/NestedDraggable.vue

/FormBuilder/Fields/Field.vue

有没有办法在 Vuex 商店中使用带有计算变量的 Vue.Draggable 列表？我对 VueJS 相当陌生，这是我当前的组件设置：

没有计算变量，一切正常。使用计算变量时，我可以在列表之间拖动列表项，但是 UI 不会更新，因为它是从商店计算的。基本上，我需要的是根据输入文件（json）显示多个列表。这些列表具有可以在不同列表之间拖动的列表项（使用 Vue.Draggable）。此外，用户可以创建新的列表项/删除现有的列表项。实现这一目标的最佳方法是什么？

先感谢您。

我正在尝试使用 DnD 重新排序调色板中的颜色。笔在这里： - https://codepen.io/neon22/project/editor/XbqvYe

即我在同一个数组中重新排序。（我还希望将其放入单独的区域以进​​行复制等）。相反，我可以拖动整个 UL，但不能拖动单个 li 元素。我已经用它做了一段时间了，我自己也很困惑。我可以看到 chrome dev 中的类发生变化，所以我认为它几乎可以工作。也许输入妨碍了？

我试图得到这样的最终结果： - https://sortablejs.github.io/Vue.Draggable/#/transition-example-2 但我还没有添加过渡组。

我还希望能够将单个颜色拖放到第二个区域（@dropend 将复制它们等等......）事实上，如果我能更好地控制可拖动，那么也许我会做一个删除垃圾桶而不是按钮。

所以我想重新排序单个颜色并启用单独的放置目标。

任何帮助将不胜感激。我敢肯定它很简单:(

我正在使用 Vue.Draggable ( https://github.com/SortableJS/Vue.Draggable ) 创建一种看板，允许我将项目从一个列表拖到另一个列表。我遇到的问题是，当我将一个列表项拖动到另一个列表的底部时，除非您的鼠标光标在拖动时触摸到第二个列表中的一个项目，否则该项目不会被添加到列表中。

我知道当你有一个空列表时，你可以设置 ':empty-insert-threshold' 这会增加放置半径以便更容易将项目放入空列表中，但是有没有办法做到这一点，在不为空的列表的底部？如果没有，是否可以添加一个占位符元素，允许用户轻松地将列表项放在列表底部？

我们发现许多用户本能地将新项目拖到列表底部，这就是我们希望使此功能更好地工作的原因。

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

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

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

但是我该怎么做：

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

是否可以Vue.Draggable与BootstrapVueTable 一起使用？

第二个问题：是否可以将项目从列表拖到 B 表中的列，所以我在从列表中删除带有项目名称的列字段后得到？

谢谢

我正在 Vue 中制作一个 Tinder 克隆类型的应用程序。我正在使用 Vue2InteractDraggable 组件。该组件非常适合用例。但是我想在可拖动部分上有一个单击事件，它不会触发（因为它将单击解释为拖动的开始，而不是单击事件）。

如果它被单击并放手，我希望它使用一个单击事件，但如果它保持超过一定时间，我希望它使用当前的拖动功能。我想不出办法做到这一点，所以任何建议将不胜感激。这是我正在使用的 Vue 组件的示例。详细信息部分上的@click 不会触发。

如果您能想到任何想法，请告诉我。我已经挂了一段时间了，找不到答案。

谢谢您的帮助。

我是新手Vue.js，我正在使用它Vue-Draggable来重新安排 DOM 内独立小部件（组件）的位置。

我还希望能够通过包含订单的 Ajax 响应动态地重新排列这个位置。

我当前实现的问题是，当我重新安排时，组件会重新渲染。我不想要那个。

任何想法都会有所帮助。

为了节省时间，我删除了所有不相关的方法，只保留了问题发生时使用的方法。我相信问题正在发生v-model，当 widgetList 更新时，我遇到了这个问题。

我想知道是否有可能使用 vue.draggable 有不同的拖放区。我的意思是：

• 我有一堆不同的食物，它们可以被拖到盘子区。
• 我有一堆不同的饮料，它们可以被拖到杯子区。
• 我有一堆不同的甜点，可以拖到甜点区。

等等。有没有什么简单的方法可以用 vue.draggable 做到这一点？

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

这里有什么问题？

VUE 代码