vue实现div拖拽互换位置且有过渡效果

vue实现div拖拽互换位置且有过渡效果

template模板

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

script：

<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){
        this.dragging = item;
    },
    handleDragEnd(e,item){
        this.dragging = null
    },
    //首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
        e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter(e,item){
        e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
        if(item === this.dragging){
            return
        }
        const newItems = [...this.items]
        console.log(newItems)
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
 
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
 
        this.items = newItems
    }
  }
}
</script>

css

<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
    }
    </style>

文章转自这里