vue拖拽div盒子实现上下拖动互换

<div  v-for="(item, index) in formList" :key="index" draggable="true"
   @dragstart="handleDragStart($event, item)"
  @dragenter="handleDragEnter($event, item)"
  @dragover.prevent="handleDragover($event, item)"
  @drop="handleDrop($event, item)"
  @dragend="handleDragEnd($event, item)">
  {{item.title}}
</div>
<script>
export default {
  data () {
	return {
		formList: [
			{  type:0,title: 'jwq'},
			{  type:1,title: 'zhn'},
		    {  type:2,title: 'zzz'}
		],
		dragging: null
	}
},
methods: {
	// 当元素被拖动时
    handleDragStart(e, item) {
      this.dragging = item
    },
    // 当被鼠标拖动的对象进入其容器范围内时触发此事件
    handleDragEnter(e) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = 'move'
    },
    // 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    handleDragover(e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      // 在dragenter中针对放置目标来设置!
      e.dataTransfer.dropEffect = 'move'
    },
    // 当放置被拖元素时
    handleDrop(e, item) {
      e.dataTransfer.dropEffect = 'move'
      if(item === this.dragging){
        return
      }
      const newItems = [...this.formList]
      const from = newItems.indexOf(this.dragging)
      const to = newItems.indexOf(item)
      newItems[from] = item
      newItems[to] = this.dragging
      this.formList = newItems
    },
    // 完成元素拖动后触发
    handleDragEnd() {
      this.dragging = null
    }
}

}
</script>