vue实现div拖拽互换位置

关于实现div拖拽互换位置，其中一种方法可用transition-group标签实现

　　<transition-group tag="div">
      <div
        class="timesharingScreenCharts"
        v-for="item in datas"
        :key="item.key"
        draggable="true"
        @dragend="handleDragEnd($event, item)"
        @dragstart="handleDragStart($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragover.prevent="handleDragOver($event, item)">
        <div class="timesharingTittle">
          <span @click="diveToBondResearchDetail(item)">{{item.name}}</span>
        </div>
        <div class="timesharingContent">
          <MinuteChart
            ref="minuteChild"
            :code="code"
            :stockCode="stockCode"
            :exchangeCode="exchangeCode"
            :preClosePrice="preClosePrice">
          </MinuteChart>
        </div>
      </div>
    </transition-group>

handleDragStart (e, item) {
　　this.dragging = item
},
handleDragEnd (e, item) {
　　this.dragging = null
},
handleDragOver (e) {
　　e.dataTransfer.dropEffect = 'move'
},
handleDragEnter (e, item) {
11 　　e.dataTransfer.effectAllowed = 'move'
　　if (item === this.dragging) {
   　　return
   }
   const newItems = [...this.datas]
   const src = newItems.indexOf(this.dragging)
   const dst = newItems.indexOf(item)
   newItems.splice(dst, 0, ...newItems.splice(src, 1))
   this.datas = newItems
20 }

 

这里拖动标题为‘中航转债1’的div与标题为‘大参林转债’的div，交换位置，也可上下交换