问题标签 [vue.draggable]

如何在该方法中访问属于已移动元素的项目的属性？我知道 evt.item.id 不起作用...

在我的项目中，我有一个 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

我正在对使用 Vue 的 Web 应用程序进行维护，并且正在尝试集成Vue.Draggable以提供一些拖放功能。

我在页面上没有得到任何输出，并且使用这种方法在控制台中出现了多个错误。

我已经尝试过在 Vue.Draggable 页面上指定和不指定很多选项，包括:keys属性。

前端不是我的舒适区，而且 Vue 对我来说非常陌生，所以我完全有可能在这里错过了一些非常简单的东西。我只是将这个问题简化为一组更简单和更简单的代码，但我没有想法。

值得一提的是，这个页面非常适用于一般的 Vue 功能，包括多个地方的v-model绑定和v-if条件。在我介绍该draggable组件之前，此示例列表显示良好。控制台输出不足以让我理解问题所在。

有没有人对这里发生的事情有一些见解或指导？

我编写了一个在整个应用程序中共享的组件，在某些地方我需要拖动/排序，而有些地方不希望它在那里。我将 a 传递prop给我的组件调用disableDraggable并基于它应该禁用，不幸的是它没有做任何事情，我怎样才能禁用可拖动？我应该注意我尝试了选项对象语法和简单的:disable，这里是相关代码：

如何禁用可拖动功能？

我应该注意到vue-draggable（我正在使用的）据说具有相同的 apiSortableJs

我想实现一个可以通过拖动重新排序的列表。列表中的项目将有一些子项目，也可以通过拖动重新排序。

子项不能成为项，项也不能是子项。

这是代码：

通过运行我的代码，你会发现它可以：

1. 通过拖动重新排序项目。
2. 通过拖动重新排序属于某个项目的子项目。例如，您可以通过拖动来更改sub_item1和的顺序。sub_item4

但它不能sub_item2拖到item1. 换句话说，我只希望我的模型list像这样通过拖动：

我有一个场景，我有多个带有标题的容器，然后是将在 vue.draggable 和页脚上使用的列表。

我已经设法将列表部分与多个容器之间的拖放一起使用，但前提是我将它们放在容器的列表区域中。

我的理想方案是在整个容器中都可以放置，这样我也可以在页眉/页脚中放置一个列表项（可能默认将其添加到列表的位置 0）。

我尝试不仅在列表项上而且在父 div 上创建额外的 vue.draggable 自定义标签，但它没有帮助，因为现在我们可以拖动整个父 div。

这是我拥有的几个容器的基础的 vue 模板：

有什么方法可以将拖动项拖到整个容器中？即把它放在页眉/页脚？

我正在使用 vue 2.6.10 和 vuedraggable 2.23.0

我知道这可能是基本的东西......但是在使用 Vue.Draggable 2.23 时我无法更新我的数据。在下面的代码中，从 axios 调用返回的 4 个列表与现在由 data() 返回的列表完全相同，但是当然还有内容。不知何故，我不断收到“属性或方法“lane0”未在实例上定义，但在渲染期间被引用。” 在 App.vue 中：

根据要求，HTML 部分（App.vue 中的模板）：

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

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

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

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

添加新的.vue

标题元素.vue

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

谢谢

我正在使用Vue.Draggable插件来实现可拖动列表。我正在传递一个排序的计算属性，如下所示：

可拖动列表：

这里的问题是可拖动列表永远不会起作用，因为我正在强制列表排序（使用 lodash _.sortBy），问题是我如何在可拖动列表中进行排序。

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

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

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

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

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

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

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