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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。