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

问题描述

[这将是对这个问题的更新][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 - How to only replace item chosen to prevent shifting all other items on grid?

解决方法

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

javascript vue.js vuedraggable