问题标签 [vuedraggable]

我使用这个组件来制作一个可排序项目的列表。 https://sortablejs.github.io/Vue.Draggable/#/simple

我的视图组件数据中有一个包含项目的数组。然后我使用 v-for 来痛苦列表，我的数组中的每个项目都有一行。

所以每次我移动一个项目时，项目数组都会被排序并改变数组项目的顺序，这就是这个组件的行为。

但是我必须对 api 进行 post 调用以保存列表中的新订单。所以我在项目数组上定义了一个观察者，每次它被可拖动组件排序时，如果数组顺序发生变化，我就会向 api 发出请求。

当这个请求失败时问题就来了，我想恢复视图中的旧值，所以我在视图中没有一个订单，而另一个不同的订单存储在数据库中。

在我的观察者中，我有 prevValues 和 newValues，我用它们来比较和检查项目顺序是否有任何变化，然后发出请求，然后，如果请求失败，则使用 prevValues 数组恢复数据值。

问题是可能会进入无限循环，因为当我恢复旧值时，原始数组的观察者会再次被触发，发出请求，失败，恢复值等等。

有没有办法恢复传递给观察者的旧值而不再次触发观察者？

谢谢

我在我的 Nuxt 项目中使用 Vue.Draggable。我在一些页面和组件中使用了它，一切都很好。但在我的一个页面上，它给了我一个愚蠢的问题！加载页面时，它将所选项目发送到第一个！之后一切正常！即使我选择和取消选择而不移动，一切正常！我试图检查选择的数组是否再次正确移动它。当所选项目是第一个 if 数组时它起作用，但如果我选择第一个而不是第一个，第二次尝试它也移动另一个项目！所以我有点卡住了。

这是代码：顺便说一句，有些变量和方法你找不到它们cmsListItems。它们被全局添加到我的项目中

模板：

脚本：

这是一个测试示例： https ://codesandbox.io/s/j4vn761455?file=/src/App.vue:112-116

第 1 步：将 4 拖到 5。如您所见，4 和 5 交换位置

步骤 2：将 1 拖到 6，如您所见，1 移动到 6 所在的位置，6 被推到一边，然后 2、3、4 和 5 全部移动。

我想保持现有项目不变，移动 1 和 6 应该在网格上移动 1 到 6 和 6 到 1 空间。所有其他项目应保留在其空间中。

我试过使用sort=false这个没有效果，没有group=，它会禁用所有拖动。

这可能吗？

我希望网格中的项目是静止的，并且仅根据所需的选择移动。如果我没有使用正确的工具，还有其他东西可以做到这一点吗？想想如果网格是图标，当将图标移动到选择时，它确实会产生一个很好的 UI，然后所有以前的图标都会自动切换。对用户来说会很烦人。

希望这是有道理的，如果您需要更多详细信息，请在下面发表评论，我会根据需要进行修改/更新。

我在开发 vue.js 应用程序时遇到了一个问题。我正在尝试在 vue-bootstrap 模式中实现可拖动列表。这些是我的代码：

'''

'''

'''

它第一次完美运行，但是在我关闭/隐藏 b-modal 并重新打开它之后，当我尝试移动列表项时它开始给我这样的错误：

我尝试使用 Vuex 来控制我的列表，但它不起作用。

我有一个使用 Vue Draggable 的 vue 组件。

在任务卡组件中 -

当我移动一个项目时，我想要一个确认更改的模式，然后才移动该项目。（即，如果我单击模式内的取消按钮，则不应移动该项目。）

使用提供的 checkMove() 函数如何实现这一点？

我正在使用 VueDraggable，下面是一组阶段，当我们将故事从一个阶段移动到另一个阶段时，如何从事件中获取数据（如下所述的阶段数组）。

假设我们将 S01 从相位中的第 0 个索引（id：PH1）移动到相位中的第一个索引（id：PH2）。所以我可以得到

• pid - 从哪个元素移动（即 PH1）
• index - 正在移动的数组中的索引（即 0）
• sid - 正在移动的元素的 id（即 ST01）
• pid - 正在向哪个元素移动（即 PH2）
• index - 它在其中移动的数组中的索引（即 1）

我试过的

checkEnd方法

我在拖动时使用嵌套的可拖动和监听事件，然后发现如果我将 itemA 拖到 itemB 中，事件会抛出：

事件添加 => newIndex，元素。

删除事件 => oldIndex，元素。

它告诉我 itemA 在 itemB 中的索引，但我知道谁是 itemB。我错过了什么？:3

我发现很难在 2 个页面之间编写一个可拖动的 vue 嵌套组件，我在你自己的计算机上放了一个简单的代码来查看它（不是我的，复制官方文档，几乎没有变化）。下面的代码

和基础设施/嵌套

到目前为止，传递一个 el.list 可以计算它的索引与保存级别元素，但是，需要防止拖入一个空列表。

我正在使用vue-draggable作为我拥有的项目列表。

我想允许用户通过右键单击来复制列表项-> 复制。选择副本后，我想克隆该项目并将其附加到鼠标光标上，以便将其拖放到用户想要的位置。

我已经实现了上下文菜单和可拖动项，但我不知道如何强制克隆和拖动项目。

任何帮助将非常感激。

我正在使用 Vuetify buildModule 设置构建一个 Nuxt 应用程序，并希望通过VueDraggablev-col使多个s 可排序（在我的情况下，我构建并添加了一个超小型 Nuxt 插件，该插件从 VueDraggable 的默认导出中绑定了一个全局组件）。s 应该用 a 包裹，所以我使用带有. 这在运行开发服务器时效果很好（在我的情况下，因为我使用的是带有 typescript 支持的 Nuxt），但是在生产模式下构建和运行时会失败。draggablev-colv-rowdraggabletag="v-row"nuxt-ts

为了说明这个问题，这里有一些关于正在发生的事情的信息。我的来源如下（即我使用 Pug）：

在开发模式下，我的 v-row 在 Vuetify 的 DOM 中正确呈现：

但是在生产模式下构建和运行时，可拖动组件实际上呈现v-row为 DOM 标签，而不是通过 Vuetify 进行渲染/解析：

有没有人知道如何确定根本原因以及如何在这里解决它？我现在可能会解决这个问题，但想知道这是否是 Nuxt 错误，或者是否有人以任何其他方式解决了这个问题。

在我的@vue/cli 4.0.5 / vuedraggable 2.24.1 中，我制作了 2 个面板，其中的元素可以从一个面板拖动到另一个面板，但不能在 1 个面板内排序。

在这里阅读文档https://github.com/SortableJS/Vue.Draggable 我看到了例子：

我希望定义 :sort 属性和

这个结果不是我所期望的：项目可以从一个面板拖到另一个面板并在 1 个面板内排序。如何不对 1 个面板内的项目进行排序？

谢谢！