[Это будет обновлением этого вопроса][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 - Как заменить только элемент, выбранный для предотвращения сдвиг всех остальных элементов в сетке?
