vue实现div拖拽互换位置

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

 1 　　<transition-group tag="div">
 2       <div
 3         class="timesharingScreenCharts"
 4         v-for="item in datas"
 5         :key="item.key"
 6         draggable="true"
 7         @dragend="handleDragEnd($event, item)"
 8         @dragstart="handleDragStart($event, item)"
 9         @dragenter="handleDragEnter($event, item)"
10         @dragover.prevent="handleDragOver($event, item)">
11         <div class="timesharingTittle">
12           <span @click="diveToBondResearchDetail(item)">{{item.name}}</span>
13         </div>
14         <div class="timesharingContent">
15           <MinuteChart
16             ref="minuteChild"
17             :code="code"
18             :stockCode="stockCode"
19             :exchangeCode="exchangeCode"
20             :preClosePrice="preClosePrice">
21           </MinuteChart>
22         </div>
23       </div>
24     </transition-group>

 1 handleDragStart (e, item) {
 2 　　this.dragging = item
 3 },
 4 handleDragEnd (e, item) {
 5 　　this.dragging = null
 6 },
 7 handleDragOver (e) {
 8 　　e.dataTransfer.dropEffect = 'move'
 9 },
10 handleDragEnter (e, item) {
11 　　e.dataTransfer.effectAllowed = 'move'
12 　　if (item === this.dragging) {
13    　　return
14    }
15    const newItems = [...this.datas]
16    const src = newItems.indexOf(this.dragging)
17    const dst = newItems.indexOf(item)
18    newItems.splice(dst, 0, ...newItems.splice(src, 1))
19    this.datas = newItems
20 }

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