VueDragable-我们如何能够从两个不同的参数切换项目

Question

[这将是对这个问题的更新][1]因为我们有同样的问题，但我的问题，我希望能够从两个不同的参数切换项目。目前，我只能从1个参数切换项目。我需要你的帮助，修改这个代码，以便它能够从不同的参数切换项目。我试着修改了5个小时，但没有成功。提前谢谢。

<template>
<div id="app">
<!-- item1 -->
<div>
<draggable v-model="item1" :move="handleMove" @end="handleDragEnd">
<transition-group tag="div" class="grid" name="grid">
<div class="cell" v-for="item in item1" :key="item">{{ item }}</div>
</transition-group>
</draggable>
</div>
<!-- item2 -->
<div>
<draggable v-model="item2" :move="handleMove" @end="handleDragEnd">
<transition-group tag="div" class="grid" name="grid">
<div class="cell" v-for="item in item2" :key="item">{{ item }}</div>
</transition-group>
</draggable>
</div>
</div>
</template>

<script>
import draggable from "vuedraggable";
export default {
name: "App",
components: {
draggable,
},
data() {
return {
item1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
item2: ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
};
},
methods: {
handleDragEnd() {
this.futureItem = this.item1[this.futureIndex];
this.movingItem = this.item1[this.movingIndex];
const _items = Object.assign([], this.item1);
_items[this.futureIndex] = this.movingItem;
_items[this.movingIndex] = this.futureItem;
this.item1 = _items;
},
handleMove(e) {
const { index, futureIndex } = e.draggedContext;
this.movingIndex = index;
this.futureIndex = futureIndex;
return false; // disable sort
},
},
};
</script>

让位给：@Alberto Rivera为这个代码回答了这个问题->[1] ：Vue Draggable-如何只替换所选项目以防止移动网格上的所有其他项目？

Answer 1

例如。如果您在this.item1上选择了一个项，则如果该项存在于另一个数组中，则创建一个条件。如果它没有，那么它应该把它移到这个。项目2。