Question

我正在使用vue draggable组件将对象从一个div拖放到另一个div。我也在使用filterBy过滤v-model。问题是当我过滤（例如获得1个结果）并尝试拖放项目时，所有项目中的第一个项目都被删除而不是拖动的项目。

从中拖出：

<draggable :list="available" class="draggable" :options=" group:'stuff'}">
   <div v-for="people in filterBy(available, filter_available, 'name')" class="list-item">
      <img :src="image" height="20"> {{ name }}
   </div>
</draggable>

放弃到：

<draggable :list="drop" class="draggable" :options="{group:'stuff'}">
    <div v-for="people in filterBy(drop, filter_doppred, 'name')" class="list-item">
       <img :src=image" height="20"> {{ name }}
    </div>
</draggable>

在它自己的两个功能都工作正常。但是，在过滤结果时，它会更改元素的索引，当从一个列表移动到另一个列表时 - 我移动一个不同的项目，而不是拖动的项目。

任何想法？

Answer 1

好吧，你必须将相同的列表传递给用于v-for的可拖动组件 - 两者都需要过滤结果。

您目前使用某种方法进行过滤操作。你不能两次调用这个方法来获得两个地方相同的结果。

您应该使用计算属性来避免两次执行相同的操作。

编辑：可拖动组件将改变提供的列表，这在使用计算属性时不会影响源数据。

在查看vue-draggable的文档后，您应该使用组件（https://github.com/SortableJS/Vue.Draggable#events）提供的change事件来更新源数据。

我无法给你一个具体的例子，因为我不知道你的逻辑是什么来确定未经过滤的源列表中移动元素的新位置。

Answer 2

大多数情况下，我同意@LinusBorg，但有一些细微差别：

1）可拖动列表道具和v-for必须使用集合

2）为过滤后的数组创建不同的数组。计算属性将不起作用，因为可拖动将尝试更改它。如果主阵列可能发生变化，您可以使用数据字段并使用watch。

3）监听change事件以在主阵列上传播更改。

Answer 3

我认为这是因为SortableJS使用索引来获取当前拖动的元素。

// Sortable.js:341
// Get the index of the dragged element within its parent
startIndex = _index(target, options.draggable);

我有类似的情况：多组拖放组应该共享相同的项目列表，并且这些项目不能跨集合重复。

我想我最终会手动添加/删除元素。

Vue Draggable无法使用filterBy？

3 个答案: