vue.draggable两列或多列之间相互拖动

vue.draggable作为一款强大的vue拖拽组件，可以满足呢对网页上元素的拖拽需求，本文将介绍两两列或多列之间相互拖动，比如把某些角色或用户拖拽到每个权限组实现一些比较炫酷的效果。

关键点group属性

//两列组件设置相同的group名就可以相互拖拽了
<draggable v-model="arr1" group="site">
    <transition-group>
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

//group属性：
//设置方式一，直接设置组名
group:'itxst'
//设置方式，object，也可以通过自定义函数function实现复杂的逻辑
group:{
    name:'itxst',//组名为itxst
    pull:true|false|function,//是否允许拖入当前组
    put:true|false|function,//是否允许拖出当前组
}

在线试一试

拖入空数组的问题

//当有个数组为空时，需要设置 transition-group 的高度才能拖入这个空数组
//style 等于 min-height:120px;display: block;
 <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>

在线试一试

控制A组只能拖出不能拖入

 <draggable v-model="arr1" :group="grpupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
//设置:group="grpupA"只能拖出
 grpupA:{
        name:'site',
        pull:true,
        put:false
 }

在线试一试

完整代码

<template>
  <div> 
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
  <div class="title" >把下面元素拖拽到B组试试看</div>
 <draggable v-model="arr1" :group="groupA"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
 <div  class="col">
    <div class="title" >B组（本组是个空数组）</div>
 <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
    <transition-group :style="style">
     <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable> 
 </div>
  </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
            draggable,
        },
  data() {
    return {
      drag:false,
      groupA:{
        name:'site',
        pull:true, //可以拖从
        put:true//可以拖出
      },
       groupB:{
        name:'site',
        pull:true,
        put:true
      },
      //定义要被拖拽对象的数组
      arr1:[
        {id:1,name:'www.itxst.com'},
        {id:2,name:'www.jd.com'},
        {id:3,name:'www.baidu.com'},
        {id:3,name:'www.taobao.com'}
        ],
        arr2:[], //空数组
        //空数组之在的样式，设置了这个样式才能拖入
        style:'min-height:120px;display: block;'
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass{
  background-color:  blue !important;
}
.chosenClass{
  background-color: red !important;
  opacity: 1!important;
}
.dragClass{
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow:none !important;
  outline:none !important;
  background-image:none !important;
}
.itxst{
  margin: 10px;
 
}
.title{
  padding: 6px 12px;
}
.col{
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius:5px ;
  float: left;
}
.col+.col{
 margin-left: 10px;
}

.item{
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border:  solid 1px #eee;
   background-color: #f1f1f1;
}
.item:hover{
  background-color: #fdfdfd;
  cursor: move;
}
.item+.item{
  border-top:none ;
  margin-top: 6px;
}
</style>