主要使用下面三个事件绑定

@dragstart=func(index, e) 开始拖元素触发，作用于拖拽元素， index为拖拽开始的位置
@dragover=func(index, e) 当元素拖动到drop元素上时触发，index为拖拽结束的位置
@drop=func(index, e) 当元素放下到drop元素触发，index为拖拽结束的位置

我主要是使用 @dragstart 以及 @drop 这两个事件

// html
<li 
 v-for="(item, index) in defComAppList" 
 :key="item.appName"
 draggable    // 使用拖拽
 @drop="dragDrop(index, $event)"
 @dragover.prevent="dragOver"   // 占位事件
 @dragstart="exchangeVid($event, index, item)"
></li>

// js
// 拖拽开始
exchangeVid(e, index, item) {
	// 记录当前开始拖拽的位置 
  e.dataTransfer.setData('dragData', JSON.stringify({ i: index }))
},

// 拖拽结束
dragDrop(index, e) {
  // 获取当前目标开始拖拽的位置
  const dragObj = JSON.parse(e.dataTransfer.getData('dragData'))
  // 位置不一样就交换  
  if (index !== dragObj.i) {
    const item = this.defComAppList.splice(dragObj.i, 1)[0]
    this.defComAppList.splice(index, 0, item)
  }
},

// 占位函数
dragOver() {},