vue js拖拽元素，调换元素位置

<ul>
    <li class="wall-item wall-screen-device-item" 
      @dragstart="dragStart($event,index)"
      @dragover="dragOver($event,index)"
      @drop="drop($event,index)"
      v-for="(item,index) in list" :key="index" 
    >
   	<img src="item.url"/>
    </li>   
</ul>

	list=[
  {
    url:"图片",
    
    info:{
      name:"暴躁的西瓜",
      description:"我的1",
      i_id:0,
      id:0,
      sort:1,
    }
  },
  {
    url:"图片",
    
    info:{
      name:"暴躁的西瓜2",
      description:"我的2",
      i_id:1,
      id:1,
      sort:2,
    }
  },
	]
  // 存放拖拽的元素
  dragElement:any = null
  dragIndex=-1
  dragIds:Array<string>=[]
  dragStart(e:any,index:number) {
    // 获取当前拖拽元素
    this.dragElement = e.currentTarget
    this.dragIndex=index
  }
  dragOver(e:any,index:number) {
    // 默认的当你dragover的时候会阻止你做drop的操作，所以需要取消这个默认
    e.preventDefault()
  }
  drop(e:any,index:number){
    // 当拖动结束的时候，给拖动div所在的位置下面的div做drop事件
    let dropElement = e.currentTarget
    console.log(this.dragIndex+"--到----"+index)
    if (this.dragElement != null && this.dragElement != dropElement) {
      const dragItem=deepClone(this.info[this.dragIndex])
      const dropItem=deepClone(this.info[index])
      const dragItemSort=dragItem.info.sort
      const dropItemSort=dropItem.info.sort
      const infos=[
        {id:dragItem.info.id,sort:dropItemSort},
        {id:dropItem.info.id,sort:dragItemSort}
      ]
      this.dragIds=[dragItem.info.id,dropItem.info.id]
      const params={
        list:infos,
      }
      this.updateSort(params).then((res:any)=>{
        if(res.httpCode < 300){
          this.dragElement=null
          this.dragIndex =-1   
          this.dragIds=[]    
        }
      })
    }
  }