本文實例為大家分享了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"http://為需要移動的元素設置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> <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  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。