vue拖拽互换位置

拖拽互换位置
拖拽交换两个节点的位置，并用背景色标记最后一次修改


上代码：

<template>
 <div class="box">
    <div v-for="(item, index) in arr" :key="index" :index='index'  class="contain"
      :id="`drag`+index"
      :ref="`drag`+index"
      draggable="true"
      v-on:dragstart="handle_dragstart"
      v-on:drag="handle_drag"
      v-on:drop="handle_ondrop"
      v-on:dragover="allowDrop"
    >{{item}} </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
      bgLog: [] // 交换节点记录
    };
  },
  methods: {
    async addBgColor(a, b) {
      // let t1 = a.textContent;
      // let t2 = b.textContent;
      
       // 交换后添加背景色
      let result = [];
      if(this.bgLog.length) {
        await this.bgLog.map((item, index) => {
          let flag = item.some(pro => {
            return a == pro || b == pro;
          });
          if(flag) {
            result.push(index);
          }
        });
        // 已交换的节点再次交换是需清楚之前的背景色
        if(result.length) {
          result.sort((j,q) => q-j);
          await result.map(item => {
            this.bgLog[item][0].style.background = '#fff';
            this.bgLog[item][1].style.background = '#fff';
            this.bgLog.splice(item, 1);
          });
        }
      }
      this.bgLog.push([a, b]);
      let color = this.randomColor();
      a.style.background = color;
      b.style.background = color;
      a.style.color = "#fff";
      b.style.color = "#fff";
    },
    randomColor() {
      let r = Math.floor(Math.random() * 255);
      let g = Math.floor(Math.random() * 255);
      let b = Math.floor(Math.random() * 255);
      return `rgb(${r},${g},${b})`;
    },
    swapElements(a, b) {
      // 交换两个dom元素
      if (a === b) return;
      this.addBgColor(a, b);
      // 记录父元素
      const bp = b.parentNode;
      const ap = a.parentNode;

      // 记录下一个同级元素
      const an = a.nextElementSibling;
      const bn = b.nextElementSibling;

      // 如果参照物是邻近元素则直接调整位置
      if (an === b) return bp.insertBefore(b, a);
      if (bn === a) return ap.insertBefore(a, b);
      // 如果a包含了b
      if (a.contains(b)) {
        return ap.insertBefore(b, a), bp.insertBefore(a, bn);
      } else { return bp.insertBefore(a, b), ap.insertBefore(b, an); }
    },
    handle_dragstart(ev) {
      ev.dataTransfer.setData('dragDom', ev.target.id || ev.currentTarget.id);
    },
    handle_drag() {
      console.log('drag-在元素开始时反复触发');
    },
    handle_dragend() {
      console.log('dragend-在拖动操作完成时触发');
    },
    allowDrop(ev) {
      ev.preventDefault();
    },
    handle_ondrop(event) {
      const data = event.dataTransfer.getData('dragDom');
      this.swapElements(document.getElementById(data), event.currentTarget);
      console.log(event.target, 'dragend-放下时时触发');
      // 交换后的数组
      console.log(text.split(' ').filter(item => item && item.trim()))
    },
    dragInit() {}
  },
  components: {},
  mounted() {
    this.dragInit();
  }
};
</script>
<style>
.box {
  width: 740px;
  display: flex;
  flex-wrap: wrap;
}
.contain:nth-child(4n) {
  margin-right: 60px;
}
.contain {
  width: 40px;
  height: 40px;
  /* background: purple; */
  border: 1px solid #eee;
  margin: 20px;
  font-size: 40px;
  cursor: pointer;
}
</style>