穿梭框排序怎么弄呀！

Question

问题遇到的现象和发生背景

穿梭框排序问题

问题相关代码，请勿粘贴截图

<template>
  <div class="selector">
    <div class="selector-left">
      <div
        class="selector-left-tag"
        v-for="(tag, index) in tags"
        :key="index"
        @click="rightTransfer(tag, index)"
      >
        {{ tag.label }}
      </div>
    </div>
    <div class="selector-line"></div>
    <div class="selector-right">
      <div
        class="selector-right-tag"
        v-for="(sel, index) in selectedTags"
        :key="index"
        @click="letfTransfer(sel, index)"
      >
        {{ sel.label }}
      </div>
    </div>
    <div class="selector-line-btn">
      <button @click="sendTags">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "tagSelect",
  props: {
    value: () => "",
  },
  data() {
    return {
      tags: [
        { label: "标签1", id: 1 },
        { label: "标签3", id: 3 },
        { label: "标签2", id: 2 },
        { label: "标签5", id: 5 },
        { label: "标签4", id: 4 },
        { label: "标签6", id: 6 },
      ],
      selectedTagIds: [],
      selectedTags: [],
    };
  },
  methods: {
    // transferTags(val, index) {},
    rightTransfer(val, index) {
      this.selectedTags.push({ ...val });
      this.tags.splice(index, 1);
      this.selectedTagIds.push(val.id);
    },
    letfTransfer(val, index) {
      this.tags.push({ ...val });
      this.selectedTags.splice(index, 1);
      this.selectedTagIds.splice(index, 1);
    },
    sendTags() {
      this.$emit("change", this.selectedTagIds, this.selectedTags);
    },
  },
};
</script>

<style lang="scss">
.selector {
  width: 500px;
  height: 300px;
  border: 1px solid #aaa;
  position: relative;
  display: flex;
  justify-content: space-between;
  .selector-left {
    margin-top: 50px;
    margin-left: 30px;
    cursor: pointer;
  }
  .selector-right {
    margin-top: 50px;
    margin-right: 36%;
    cursor: pointer;
  }
  .selector-line {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 1px;
    height: 200px;
    background-color: #aaa;
  }
  .selector-line-btn {
    position: absolute;
    bottom: 50px;
    width: 500px;
    height: 1px;
    background-color: #aaa;
    & button {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 30px;
    }
  }
}
</style>

运行结果及报错内容

默认情况下

现在我点击了标签2，移动到了右边，我再把标签2点击回到左边，回到左边之后怎么能回到它原来的位置啊，急等，真的会谢！

Answer 1

// 假如你一开始数据是这个
var list = [
    {name: '标签1'},
    {name: '标签2'},
    {name: '标签3'},
]
那你可以给数据根据下角标添加个序号字段sortIndex 
list.forEach((i, index) => {
    i.sortIndex = index
})
// 这样每条数据下面都有个序号字段,等下点击右侧的那条数据，例如是{name: '标签2', sortIndex: 1},那左侧就可以用指定下角标插入的方式，而且下角标位置就是数据里的sortIndex
// 1:表示在什么位置，也就是这里的sortIndex; 第二个参数0表示删除多少个，这里不删除所以传0；第三个参数就是插入的数据
list.splice(1, 0, {name:'标签2',sortIndex: 1})
console.log(list)