问题标签 [vuedraggable]

我对如何正确使用 vueDraggable 和 Laravel 感到困惑。

我可以在浏览器中拖动和排序元素，但数组没有改变（当我在控制台中检查时）/在我看来，这些更改没有反映在数组中。移动项目后数组索引号不应该改变吗？

在overview.blade.php 我有组件：

在 qm-draggable.vue 我有：

在它说的文档中，传递数组的一种方法是：

价值

类型：数组

必需：假

默认值：空

可拖动组件的输入数组。通常与内部元素 v-for 指令引用的数组相同。这是使用 Vue.draggable 的首选方式，因为它与 Vuex 兼容。它不应该直接使用，只能通过 v-model 指令使用：

但是我在哪里做呢？在overview.blade.php 或组件（.vue）中，或两者兼而有之？

我正在使用vue-draggable并尝试拖动玩家名称。它包含两个拖动列表，可以将项目从一个拖动到另一个。

从我拖动项目时的第一个列表中，它只拖动一个玩家名称，这是正确的。

但是当我从第二个列表中拖动项目时，它会作为一个整体拖动。如果第二个列表包含两个玩家姓名，即 San 和 Kim。当我拖动 Kim 时，它同时拖动 San。有没有办法让第二个列表teamByTime2一次只拖动一个名字，就像第一个列表一样dataList3？

我也在JSFiddle代码上上传了数组对象。这就是我的数组查找第一个和第二个项目列表的方式。

下面是我的代码JSFiddle

https://jsfiddle.net/ujjumaki/78vsbu3q/26/

我目前正在做一个网站构建器，用户可以在其中拖放以添加元素。

拖放效果很好，但我想要的是，如何禁用/隐藏目标容器中的放置占位符？

如图所示，每当我将鼠标悬停在容器上时，默认情况下它会显示我的拖动元素的副本，这是我不想要的。

这是我的代码：

脚本 ：

由于我的数组包含多个数据，因此很难上传所有数据。所以我在下面上传了我的数组和对象的图像。

看法

有没有办法将 Player_minors first_name="Sanu" 作为 element.Person.first_name 下的单独实体获取。这样就可以分别拖动 Person.first_name 和 Player_minors.first_name 了？

使用element.Person.first_name打印出San。但如果我使用{{element.Person.Player.Player_minors.first_name}}它不会打印出任何东西。

我vue-draggable用来将一些元素拖到div1and div2。Draggable 事件:move只有在teamName1大于 1 时才为真。如果teamname1大于 1，它可以拖动到 div1 以及 div2，这基本上是错误的。有没有办法添加:move:checkMove2，例如当teamName2值> 1时，第二个div:move:checkMove1的可拖动事件变为:move="checkMove2"真？我尝试使用，但没有帮助。:move="checkMove1 && checkMove2"

数据

方法

我vuedraggable用来允许用户将项目从一个列表拖到另一个列表。这是目前的样子：

的默认功能vuedraggable是将源元素插入目标列表

但是，我想将目标列表视为放置占位符，以便源项目在悬停时突出显示目标，并在放置时替换它，如下所示：

vuedraggable有没有办法使用或使用另一个类似的组件来实现这种效果？

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

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

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

我vue-draggable用来拖动我的项目。我正在尝试使用:move="onDrop"事件打印出移动的 id，它console.log(this.teamByTime2[0].id);仅使用第一个值打印出来。让我们从我的DATA中举个例子，有人叫KIM CHAN，如果我拖动 Kim，那么它假设打印“5”而不是“4”。有没有办法解决这个问题？

看法

方法

数据

这是我下面的代码CODE SANDBOX

https://codesandbox.io/s/serene-wildflower-sh4sk?file=/src/App.vue:874-1476

最近我发现SortableJS / Vue.Draggable库（https://github.com/SortableJS/Vue.Draggable）有一个新选项，可以启用多重拖动以从数组中选择多个元素并将它们一起移动（https://github.com/SortableJS/Vue.Draggable/pull/744）。

我已经看到了可以完美运行的示例，例如：

• https://jsfiddle.net/zr042g3j/3/
• https://codepen.io/Flip535/pen/jOOKBZj
• https://github.com/SortableJS/Vue.Draggable/pull/744

但是当我尝试在我的项目中使用它时，我只能找到让它工作的方法。

以下是我的项目的详细信息：

• Vue：2.6.10
• 可拖动：2.23.2

在我的 vue 组件中，我以这种方式导入了 vuedraggable：

我已经应用了这种方式（为此帖子的目的已减少代码）：

我已经注意添加了select-classSortableJS / Vue.Draggable 文档中使用多拖动选项所需的属性。

打印为可拖动列表的对象位于此 JSON 结构下：

尽管做了所有这些努力，我还是无法让它发挥作用。我什至必须根据我之前找到的一个 codepen 复制一个更精简的代码版本，并且它可以工作（https://codepen.io/Juan-Sin-Miedos/pen/jOWOyWW）

为什么它不适用于我的项目？

任何帮助将不胜感激，非常感谢！

下面的代码允许将组拖入toListFetchRouteA1：

我试图允许拖动每个人的姓名而不是按组，所以我改为:list="toListFetchRouteA1"（:list="teamfetch.Team_player_sessions"如下所示），但它会引发错误：无法读取未定义的属性'Team_player_sessions'。

它也没有拖动。有没有办法让div v-for="personame in teamfetch.Team_player_sessions可拖动的personname？