当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现div拖拽互换位置

vue实现div拖拽互换位置

2018年12月05日  | 移动技术网IT编程  | 我要评论

05年欧冠决赛,阳仔演笑会3,窃汉

本文实例为大家分享了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
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网