0

[这将是对这个问题的更新][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>

cedits 至：@Alberto Rivera 对于此问题已回答的代码 -> [1]：Vue Draggable - 如何仅替换选择的项目以防止移动网格上的所有其他项目？

4

1 回答 1

1

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

于 2021-04-25T15:30:44.247 回答