问题标签 [vuedraggable]

我想看看我是否可以从社区获得一些指导，了解我如何能够采用这种方法并正确呈现列表。

所以这就是我正在尝试做的事情：

• 有一份清单
• 通过拉出对象数组来拆分拖动列表。

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

• 在应用程序内部，我有一个list: []空数组。
• 在我的方法中，我有一个 GET 方法，它检索一个对象，其中包含两个数组，其中两个数组被选中并且可用。
• 在created()通话中，我将列表输出为console.log(this.list);，这是我得到的响应：

问题：

以前，我有两个列表，但它似乎根本不够高效，是否可以在对象内部的数组上使用 v-for？

假设我的一个可拖动组件如下所示：

是否有可能以某种方式定位v-for="app in list"为 'v-for="app in list.(available array)"`？所有帮助将不胜感激！

这是我目前得到的：

但它应该是三个对象名称：

我将 vuedraggable 添加到我正在制作的手机游戏中，人们可以在其中解读句子。到目前为止，它一直运作良好。我最近从精灵表中为我的可拖动元素添加了背景图像，但现在我的可拖动元素不再可拖动。有没有人对为什么会发生这种行为有任何建议？

这是我的 Vue 模板

stoneWord 是一个计算出来的

我有以下store定义：

在我的组件中，我使用computed来获取imageList：

问题是我想imageList通过index使用可拖动库来编辑 的值，但 imageList 不会反应，它只是移动图像而不显示前一个索引中的另一个图像：

所以我用两个draggable调用包装了以下模式，在顶部draggable项目中，我正在拖动button. 有什么办法可以防止物品被拖动吗？我希望他们能够对列表中的项目进行排序，但不要将它们拖到“可用”列表中，因此甚至无法拖动按钮。

这是代码：

这是示例：如您所见，我仍然可以拖动button但不能放下它，我怎样才能完全阻止“选定”列表按钮被拖动？感谢所有帮助！

我有一个带有数组的数组：

这些元素位于使用可拖动 JS 的 vue 组件中。Draggable 有两个属性@start 和@end。每当我在数组中拖放元素时都会触发。每当我拖动其中一个元素时，我都想删除当前元素前后的空数组。因此，当我拖动 [6] 时，数组应如下所示：

isVisible 在@start 触发，所以每当我选择一个元素时。如何删除数组中索引前后的元素？我想用切片？

I'm using Vue Draggable in my Nuxt Js project and am looping over a series of components which is fetched from an API and cloned into my page. One of these contains my chart data options, which I can see quite clearly when I do a console.log of my data, and it has the appropriate objects.

However, when I output this to my page, Vue Draggable appears to be stripping out my nested objects, why?

Here's what my component.datasets[0].chartOptions would look like before outputting to the page:

When I console log this.report in my function that gets my report, I can see my chart options clearly:

Here's what Vue Draggable gives me for my component.datasets[0].chartOptions which I'm outputting within my v-for:

And for reference, here's my v-for:

What am I missing?

[这将是对这个问题的更新][1] 因为我们有同样的问题，但我希望能够从两个不同的参数切换项目。目前我只能从 1 个参数打开项目。我需要您的帮助，修改此代码，以便它能够从不同的参数切换项目。我已经尝试修改这个 5 小时但没有运气。提前致谢。

cedits 至：@Alberto Rivera 对于此问题已回答的代码 -> [1]：Vue Draggable - 如何仅替换选择的项目以防止移动网格上的所有其他项目？

我试图仅包含所有相关代码。这适用于 Vue3 和 VueDraggableNext。我想更改列表的顺序，而不是在列表之间移动它。

以下是模板和相关的脚本：

上面的代码中没有呈现任何内容，除了：

如果我用 v-for 替换可拖动部分，它会呈现，但当然没有可拖动操作：

我有一个带有vue-panZoom的网格

里面有一个vue-draggable-resizable区域，如下图所示

图片

当我拖动（vue-draggable-resizable）灰色正方形时，黑色（平移缩放）矩形也会移动。when the gray square is selected, the panZoom must be locked or in the beforeMouseDown & beforeWheel mode state.

panzoom 文档中也有这种方法，但我不知道它是否也可以在 vue 中工作：

暂停/恢复全景您可以通过调用以下方法暂停和恢复全景：

我该如何解决？提前致谢

密码箱

正如您在沙箱中看到的那样，lock-aspect-ratio 属性按预期工作。但是，我想以不同于原始纵横比的方式以编程方式更改宽度/高度，然后再次激活锁定纵横比。有什么可能的方法来做到这一点？在调整大小时，我想坚持使用相同的锁定纵横比。