vue数组拖动

<template>
  <div>
    <div> 拖动 </div>
    <div class="container">
      <div
        v-for="item in items"
        :key="item.id"
        draggable
        @dragstart="startDrag($event, item)"
        @dragenter="enterDrag($event, item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'draggle',
    data() {
      return {
        items: [],
        currentItemId: '',
      }
    },
    mounted() {
      for (let i = 1; i <= 7; i++) {
        this.items.push({ name: `${i}号`, id: i })
      }
    },
    methods: {
      // 传入index会陷入死循环
      // 开始拖动
      startDrag(event, item) {
        this.currentItemId = item.id
      },
      //进入需要拖动的元素
      enterDrag(event, item) {
        const startIndex = this.items.findIndex(val => {
          return val.id == this.currentItemId
        })
        const index = this.items.findIndex(val => {
          return val.id == item.id
        })
        let newItems = [...this.items]
        ;[newItems[index], newItems[startIndex]] = [newItems[startIndex], newItems[index]]
        this.items = newItems
      },
    },
  }
</script>
<style scoped lang="less">
  .container {
    width: 400px;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    > div {
      width: 30px;
      background-color: #ecf5ff;
      color: blue;
      cursor: move;
      text-align: center;
      height: 30px;
    }
  }
</style>

如果是elementui的属性如el-tag就需要使用.native

<el-tag
  v-for="item in items"
  :key="item.id"
  draggable
  @dragstart.native="startDrag($event, item)"
  @dragenter.native="enterDrag($event, item)"
  @dragend.native="endDrag()"
>
 {{ item.name }}
</el-tag>