vue 实现拖拽div交换位置

<template>
  <div class="root">
    <transition-group tag="div"
                      class="container">
      <div class="item"
           :class="'item'+i"
           v-for="(item,i) in items"
           :key="item.key"
           :style="{'background-color':item.color,'border':'1px solid'}"
           draggable="true"
           @dragstart="handleDragStart($event, item)"
           @dragover.prevent="handleDragOver($event, item)"
           @dragenter="handleDragEnter($event, item)"
           @dragend="handleDragEnd($event, item)">
        <div>{
   {
   item}}</div>
      </div