问题标签 [vue.draggable]

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

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

模板：

脚本：

我有一个 Vue.js 项目，并且我有这样的客户列表，其中包含名字-姓氏-地址-城市-州/省-电子邮件>>> 请在此处查看项目图片...

使用 Blue Button -- Kayit Ol -- 我填写表格并进行注册。见图>>报名表

当我单击黄色按钮 - Ayarlar - 我需要查看 Draggble 列表中的所有城市，当我在 Draggble 中排序并单击绿色按钮 - Şehre Göre Sırala - 时，下面的客户列表应该排序相同作为拖动列表。我使用了 Vue.Draggble 包（https://github.com/SortableJS/Vue.Draggable），但我无法正确获取 firebase 数据并对它们进行排序。

注册.vue

设置.Vue

Firebase 数据

请参阅 Firebase 实时数据库musteriler图片 >>> musteriler.json

查看 Firebase 实时数据库城市图片 >>> city.json

那么我应该如何安排数据库以及如何正确按 Vue.Draggble 对客户列表进行排序？

谢谢。

我正在尝试使用 vue draggable 将项目从一个列表移动到另一个列表，但列表位于组件内部，我无法让它工作。这些项目能够在列表内移动，但不能从一个列表移动到另一个列表。

我有一个包含所有列表的 Board 组件和一个包含可拖动项目的 List 组件。

这是板组件：

这是 List 组件：

我正在尝试使用 vue.draggable 对卡片进行持久性排序，但我还没有在挂载上进行排序，而且我有点坚持更新所有节点的索引

在可拖动我打电话

（仅供参考，我的可拖动项目称为节点）

以上方法可以很好地使用正确的 newIndex 位置更新正确的节点，但是当然所有其他节点现在也有 newIndex 位置，但是我不确定在哪里可以捕获该信息以便使用所有其他 newIndex 更新数据库？我觉得在听到@update 之后，我需要说嘿，请给我所有可拖动项目的所有索引，然后我可以将其循环到调度中......但我还需要确保更新正确的 nodeid。 ..

然后，一旦我解决了这个问题，我需要将节点安装在节点排序位置上，以实现 vue 可拖动初始状态。任何帮助表示赞赏。谢谢

编辑

我尝试根据@Amaarrockz 的反馈创建一个简单的沙箱，但我遇到的问题似乎仍然出现：

我想要的最终结果应该是：

• 第 1 步（不可拖动）
  1. 孩子 1 （可拖动）
• 第 2 步（不可拖动）
  1. 孩子 1 （可拖动）
  2. 孩子 2 （可拖动）
  3. 孩子 3 （可拖动）
• 第 3 步（不可拖动）
  1. 孩子 1 （可拖动）
  2. 孩子 2 （可拖动）

孩子只能延伸到 1 层，并且可以在各自的父母内移动。

<draggable>我已经将其缩减为这样一个事实，即在 parent 内部渲染 a 似乎存在问题<ul>。v-for如果我创建一个使用父变量的二维 JSON 数组，例如stepTitle，它会出现关于stepTitle is not defined. 如果我创建一个一维 JSON 数组并使用不同的v-for变量，它不会正确呈现 HTML。

我到处搜索具有嵌套可拖动对象的示例，但我发现的所有示例都显示父对象是可拖动的，这不是我想要的结果。此外，孩子能够成为父母，这也不是我想要的。

不正确的渲染告诉我我做错了什么，但是 vue-draggable 在渲染 children 时是否存在<draggable>问题<ul>？

原帖

我在使用 vue.draggable 时遇到了一个有趣的问题，我花了几个小时试图弄清楚。

一般概念是我有一个包含嵌套数组的数组。这是数据：

它应该呈现如下内容：

目标是让这些子步骤可拖动并相应地调整 Vue 数组。但是，当我引入<draggable>标签时，代码会中断：

属性或方法“项目”未在实例上定义，但在渲染期间被引用。

这是上下文的完整代码：

HTML

Vue 应用程序

如果我将<draggable>标签替换为<ol>它会正确呈现但嵌套组件不可拖动。一旦我介绍了可拖动标签，它就会中断。从数小时的实验来看，我认为错误是指v-for="t in item.steps">. 如果是这种情况，我该item.steps如何工作？

任何指导将不胜感激 ：）

所以我想看看是否有人熟悉这个，看看是否有人可以给我一些关于我正在尝试做的事情的指导：

所以这是Vue.js我拥有的应用程序：

我有一个list: {}对象，它抓取我的两个列表数组selected并将available它们呈现在前端，如下所示：

这是我的@change回调的作用：

问题：

如何在每次更改时从数组中提取 list.selected ID，因此当有人添加项目或删除项目时 - 我可以看到每次拖动的 ID，但是有没有办法一次获取所有 ID在数组中？

我正在尝试根据某些验证状态设置拖动元素的样式。

这是我作为示例创建的 jsfiddle。在此示例中，sortable-ghost该类的样式为黄色背景和红色边框，但如果将元素放置在“不要放在此处”元素上，那么它将获得红色背景并变得更加透明。

这部分工作正常。

我想另外设计的是sortable-drag类。当得到红色背景时，我想给它一个蓝色背景，sortable-ghost但我不知道该怎么做。

在我看来，sortable-drag当您开始拖动它时，它就是该元素的精确克隆。要测试此声明，您可以在“不要放在这里”元素上放置一些东西，这将导致warnMove保持其值，在可拖动包装器上设置警告类，如果您尝试拖动任何元素，您甚至会看到它呈蓝色尽管warnMove已重置，并且不应使用蓝色背景设置样式。

http://jsfiddle.net/dct1s6nv/9/

不保留初始数组顺序，更改 itemKey 道具也不会影响顺序。这些问题有快速解决方案吗？

我正在构建一个带有多个图表的仪表板。对于图表库，我使用vue-chart-3包装器登陆VueChartJS，对于拖放库，我使用的是vue-draggable-next。

我遇到的问题是，如果图表的响应选项为真并且您拖动它们，它们的高度和宽度设置为 0。我添加了一个切换来证明这是响应功能的问题，但是有什么否则我可以做些什么来解决这个问题？

现在我想知道我是否需要做一些不可见的切换，每次单击图表时都会激活它以拖动它，然后在完成拖动时关闭，但这似乎有很多潜在的代码和时间来暗示这一点功能并想知道是否有更好的方法来做到这一点？

任何建议或帮助将不胜感激！

我制作了一个CodeSandbox来显示这个问题，下面还有一个 gif 来显示正在发生的事情。

我正在尝试从我的项目的 Vue2 迁移到 Vue3。这是一个带有 Vue 和拖放表的简单 html 项目。它在 vue2 中运行良好，但在 vue3 中不行。在控制台中出现此错误：“vue@next:8001 [Vue 警告]：无法解析组件：可拖动如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。在”