vue implements div drag and drop interchange position

<transition-group tag="div" class="container">
 <div class="item" v-for="(item,index) in items" :key="" :style="{background:,width:'80px',height:'80px'}"
  draggable="true"
 @dragstart="handleDragStart($event, item)"
  @="handleDragOver($event, item)"
  @dragenter="handleDragEnter($event, item)" 
  @dragend="handleDragEnd($event, item)" >
 </div>
</transition-group>

<script>
export default {
 name: 'Toolbar',
 data () {
 return {
  items: [
  { key: 1, color: '#ffebcc'},
  { key: 2, color: '#ffb86c'},
  { key: 3, color: '#f01b2d'}
  ],
  
  dragging: null
 }
 },
 methods:{
 handleDragStart(e,item){
   = item;
 },
 handleDragEnd(e,item){
   = null
 },
 //First turn the div into a placeable element, that is, rewrite dragenter/dragover handleDragOver(e) {
   = 'move'// ="move";//Set in dragenter for the placement target! },
 handleDragEnter(e,item){
   = "move"//Set dragstart event for elements that need to be moved  if(item === ){
   return
  }
  const newItems = [...]
  (newItems)
  const src = ()
  const dst = (item)
 
  (dst, 0, ...(src, 1))
 
   = newItems
 }
 }
}
</script>
 
<style scoped>
 .container{
  width: 80px;
  height: 300px;
  position: absolute;
  left: 0;
  display:flex;
  flex-direction: column;
  padding: 0;
 }
 .item {
  margin-top: 10px;
  transition: all linear .3s
 }