问题标签 [vuedraggable]

我正在使用 vue js，并且我有 dargable 组件项，我使用 for 循环生成了可拖动组件来显示组件，所以当单击组件时，如何检测我在哪个组件中。

这是我的 index.vue 文件：

这是 itemComponent.vue 文件：

• 导轨 6
  • Vue 2.6.10
  • vuedraggable 2.23.0

问题如下，里面有一个 Cards 的列表，当你点击 Card 时，会弹出一个有 Card 的模态窗口，然后在模态窗口上按住鼠标左键并按住鼠标，vuedraggable 事件将关闭模态窗口并破坏卡片列表，当模态窗口打开时如何避免这种可拖动的行为？

代码可以完全从 GoRails 下载，我是通过视频 https://github.com/gorails-screencasts/vuejs-trello-clone完成的

播放方法——点击卡片打开模态窗口，在打开的模态窗口中，按住鼠标左键不放，此时模态窗口将关闭，列表将断开

应用程序.js

应用程序.vue

列表.vue

卡片.vue

之前和之后会发生什么

在此处输入图像描述

在此处输入图像描述

我正在尝试使用 Vue 可拖动实现拖放文档构建器，您可以添加标题等元素并重新排列它们的顺序。这些涉及使用带有输入字段的组件。

我让它工作正常，除非你在标题 1 中输入一些内容，然后将其与标题 2 交换，你输入的输入文本仍然在标题 1 的相同位置，即使元素交换了。但奇怪的是，它确实在数组列表上正确地切换了它。

基本上，您键入的输入在您交换它时似乎不会留在组件中。它要么留在原来的位置，要么只是清除，这显然是非常有问题的。

它使用一个动态组件循环遍历数组来显示列表，它还涉及发出一个对象，然后在数组中更新：

添加新的.vue

标题元素.vue

有谁知道为什么文本输入字段会在数组中更新但不会更新浏览器中的位置？

谢谢

我们有以下模板结构：

reorder-modal-row本质上是一个可拖动的组件，如下所示：

现在，可拖动组件的模型使用通过 props 传递的数据的克隆:dash-board-data。我们想要实现的是，当用户点击里面的保存按钮时，b-modal它应该从孩子那里收集克隆的数据并进行后端调用以更新或数据库。问题是我们不确定如何实现这个功能，因为 Save 按钮不是孩子的一部分。

我们尝试使用可拖动的移动事件，但每次拖动都会向父级发出一个事件。任何帮助将不胜感激 ！

我正在尝试将 vue-draggable （https://github.com/SortableJS/Vue.Draggable）用于大量嵌套项目（组织树）。

由于有很多数据，用户需要能够在拖动时滚动。

据说支持 sortable.js 中的所有选项，但我不知道应该如何实现“自动滚动”。 https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll

我试过：

并在模板中：

我得到的错误是：

我正在使用 vuedraggable 在 vue 中实现嵌套层组件。我尽量让它靠近 Adob​​e 的图层面板（例如在 Illustrator 中）。

所需的行为是：在拖动项目时，它保持在它的位置，只有一条黑线表示释放拖动后项目将插入的位置。

黑线可以通过样式化vue draggable的ghost来实现。但是如何防止项目在拖动时从其原始位置移除？

Adobe Illustrator 图层示例

我在我的 Vue 项目中使用 Vue.Draggable 并尝试将按钮从侧边拖动（克隆）到可拖动组件中。

当我将按钮克隆到组件中时，我想修改数据。但是我发现当我修改与组件绑定的列表中的数据时，sider使用的原始列表会自动更改。

Vue.Draggable 中是否有某种同步机制？我只想更改组件中的对象数据。

我尝试使用 Chrome 浏览器中的 vue 扩展手动修改 list2 中的对象。它仍然会发生。所以我认为这可能不是我的代码中的错误。

上面的代码是我将数据拖到组件中时的事件，并更改了一些变量。

尽管我对从中克隆数据的 Sider 中的原始数据没有做任何事情，但它仍然发生了变化。

有没有办法改变拖动的数据但不影响原始数据？请帮帮我，谢谢！

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

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

先感谢您。

我想反映图像大小的变化，图像列表中的位置。

我可以在单张图像时做到这一点。但是当我在列表中处理多个图像时，它不起作用。

这是我的代码

下面是 onResize 方法

错误消息只是说'imgRef 没有定义'。我的代码有什么问题？

我会评论我的完整源代码。

我将 vuedraggable 与 Vuex 存储一起使用，文档建议每个组件都应具有直接指向数组的 v-model 属性，因此可以通过 setter 更改 Vuex 存储。

问题是：我正在动态地将新数组添加到存储中，并在模板中使用 v-for 循环访问它们。在 v-for 中有标签，我使用方括号语法从列表中访问正确的数组。它会渲染数据，但在这种情况下，v-model 无法改变“listOfArrays [index]”下没有设置器的状态。

我试图通过直接分配动态数组来存储具有随机生成的名称的属性，并拥有一个包含属性名称列表的数组来解决它，但是改变它们的问题仍然存在。显然我对此有错误的想法。

我想要实现的是：有一种方法可以将新数组添加到 $store，然后使用组件状态提交突变。我希望指出正确的方向，或者可能是替代解决方案。