vue中拖拽更改顺序

大盒子里有13个小盒子

通过拖拽变换他们的位置

下面是代码

html

<div style="width: 302px;border: 1px solid #000;display: flex;flex-wrap:wrap;margin: 0 auto;">
      <div v-for="item in divList" 
           :key="item" 
           style="width: 50px;height: 50px;"
           draggable="true"
           @dragstart="handleDragStart($event, item)"
           @dragover.prevent="handleDragOver($event, item)"
           @dragenter="handleDragEnter($event, item)"
           @dragend="handleDragEnd($event, item)">{{item}}</div>
    </div>

data

dragging:null,
divList:[1,2,3,4,5,6,7,8,9,10,11,12,13],

methods:{
    //拖拽相关
    handleDragStart(e,item){
        this.dragging = item;
    },
    handleDragEnd(e,item){
        this.dragging = null
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
        e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e,item){
        e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
        if(item === this.dragging){
          return
        }
        const newItems = [...this.divList]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.divList = newItems;
    },
}