vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中A列和B列可以相互拖动，但是无法拖到C列。
<template>
<div>
<!--使用draggable组件-->
<div class="itxst">
<span>A、B列可以相互拖动，无法拖到C列</span>
<div class="col">
<div class="title" >A列</div>
<draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<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="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
<div class="col">
<div class="title" >C列</div>
<draggable v-model="arr2" group="c" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in arr3" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<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>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag:false,
//定义要被拖拽对象的数组
arr1:[
{id:1,name:'www.itxst.com'},
{id:2,name:'www.jd.com'},
{id:3,name:'www.baidu.com'},
{id:4,name:'www.taobao.com'}
],
arr2:[
{id:1,name:'www.google.com'},
{id:2,name:'www.msn.com'},
{id:3,name:'www.ebay.com'},
{id:4,name:'www.yahoo.com'}
],
arr3:[
{id:1,name:'item 1'},
{id:2,name:'item 2'},
{id:3,name:'item 3'},
{id:4,name:'item 4'}
]
};
},
methods: {
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
};
</script>
