问题标签 [vuedraggable]

我正在尝试在表格中使用 vuedraggable，但我无法使用所需的句柄重新排列表格行：

代码：https ://codesandbox.io/s/kkpp3xry63

应用程序.vue

行.vue

我正在尝试从SortableJS库（1.8.4）中连接到 dragover/touchmove 事件。元素可以很好地拖动和交换，但监听这些事件不会触发我提供的回调函数。

用例是，如果可拖动对象在 之外swapThreshold，但在目标上方，则应该能够将其拖放到目标上而无需与之交换位置。一旦可拖动对象到达swapThreshold，它应该像往常一样交换位置。

（评论只是为了清楚起见）

我考虑了一个解决方案，move但仅在交换发生后调用，或者如我上面关于该invert-swap属性的评论中所述不可靠

注意：我使用的是Vue.Draggable (2.20)，但如果直接使用SortableJS，这也应该适用

I have a set of cards that are arranged vertically and are currently draggable. When you drag a card over another, you see this card as a semi-transparent card hovering over the target position, before you let go, the cards underneath swap positions.

I want to know how to trigger that behavior(swap positions/show animation of moving up/down) without dragging eg. click arrows up/down.

To clarify: "trigger event" as in not call the method that responds to the moving event(ending) but make the cards move as if a mouse/finger dragged the cards in a direction(up/down).

For now I have added a position switch that reorders the array but it does not trigger the visual aspect eg. dragging. You just see a flash and then cards are ordered differently.

See visual behavior

before move

during move

after move

Draggable component

Relevant JS methods

我有两个列表（使用 cue-draggable），一个源列表和一个配置（排序）列表。将项目从源列表拖放到配置列表时，我想在将数据添加到配置列表之前对其进行转换。

我目前正在使用 onChange 事件，因为我想访问实际的 JSON 项目，我使用 JS 拼接函数删除已添加的项目，然后转换数据并插入到配置列表中。这可行，但我更愿意在任何插入目标列表之前转换数据。

在我的项目中，我有一个 Rails API 后端，我使用acts_as_list gem 和Vue 前端，我使用Vue Draggable 包。

拖动的行为有效，我看到一个 PUT 请求被发送到我的服务器。然而，发生了一些奇怪的事情：

场景 1： 我将一个项目从位置 1 拖到位置 2（所以它们基本上是触发器）。正在发送 PUT 请求，但未发生实际更新。

场景 2： 我将一个项目从位置 1 拖到位置 3。这意味着位置 2 应该向上移动到 1，2 应该向上移动到 1，并且 1 应该在 3 中（希望这有意义）。这很奇怪，因为有时我会在我的服务器上看到更新，但不是每次都发生。

我需要的是在拖动时更新整个列表。

待办事项列表.vue

参数

trips_controller.rb

我有两个独立的拖动区域，当我将组件从一个区域拖动到另一个区域时，如何根据拖动到的区域动态更改组件的状态？

目前，我正在从序列化程序呈现状态，但我想在拖放后动态更改它。

我想在同一行或不同行之间拖动项目行以及项目本身。它一直有效，直到我尝试移动一行的最后一项，然后导致错误。

jsfiddle： https ://jsfiddle.net/lexixon/nf97erqx/64/

错误：

我有一个数组，可以通过回答多个问题从用户那里获取输入。这些值存储在我的 vuex 存储中，结果以可拖动列表的形式显示在屏幕上。

可拖动列表

但是，虽然我可以在屏幕上拖动和排序值 - 它们不会在 Vuex 商店中重新排序，只能在屏幕上。

1) 我需要他们在商店重新订购。

2）虽然通过用户输入创建了一个数组，但我要求用户能够将值拖到第二列甚至第三列中以便对它们进行分组。

如何使我的屏幕更改反映在商店中 - 甚至在新数组中 - 以便我的列表可以分成多个列？

这是我的代码沙箱：https ://codesandbox.io/embed/vue-template-j53g3

编辑：萨比回应后

我已经实现了以下代码：

但如下图所示 -{{ allValues }}即使在屏幕上重新排列了数组，它的顺序仍然相同。

第二次编辑

按照建议更新了代码。

控制台正在记录“拖动结束”，但如下面的屏幕截图所示，商店中的核心值尚未更新 - 这是在通过开发工具“重新加载状态”之后。

我正在根据可拖动排序上的排序“DESC”或“ASC”类型对项目列表进行排序，当排序在服务端完成时，然后创建触发器以将新的排序项目列表附加到可拖动列表。

编辑后：

在此处输入图像描述

我正在使用vue draggable它可以在本地工作，但不能在服务器上工作。

我有 4 个可拖动的组件，它们作为 2 组工作，像这样的活动和非活动组件

每个可拖动组件的组是一个对象，例如

上面的代码在本地正常工作，我可以将元素从一个拖放到另一个没有问题，如下所示。

但是当推送到生产时，拖放不起作用。

我检查了 chrome 控制台中的元素，并注意到在生产中，group可拖动的属性显示为group="[object Object]".

这不会发生在本地，为什么会发生在生产中？我该如何解决？