使用 vue.draggable 实现拖拽分组
1.安装draggable
npm i -S vuedraggable || yarn add vuedraggable
2.页面引入
import draggable from "vuedraggable"
3.注册
components: {draggable },
例子
<template>
<div>
<div class="itxst">
<div class="ss">
<div class="col" v-for="(item, index) in arr1" :key="item.name">
<div class="title">{{ item.name }}</div>
<draggable
v-model="arr1[index].users"
:group="groupA"
animation="300"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
@change="statudd(item)"
>
<!-- @start="onStart"
@end="onEnd" -->
<transition-group :style="style">
<div class="item" v-for="ite in item.ist" :key="ite.name">
{{ ite.name }}
</div>
</transition-group>
</draggable>
</div>
</div>
<div>
<div class="col">
<div class="title">人员</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.name">
{{ item.name }}
</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "****",
data() {
return {
msg: "团队归属",
drag: false,
groupA: {
name: "site",
pull: true, //可以拖从
put: true, //可以拖出
},
groupB: {
name: "site",
pull: true,
put: true,
},
//定义要被拖拽对象的数组
arr1: [
{
id: 1,
name: "01队",
ist: [
{ id: 1, name: "张三1" },
{ id: 2, name: "张三2" },
{ id: 3, name: "张三3" },
{ id: 3, name: "张三4" },
],
},
{
id: 2,
name: "02队",
ist: [
{ id: 1, name: "李四1" },
{ id: 2, name: "李四2" },
{ id: 3, name: "李四3" },
{ id: 3, name: "李四4" },
],
},
],
arr2: [
{ id: 1, name: "小明" },
{ id: 2, name: "小李" },
{ id: 3, name: "小路" },
{ id: 3, name: "小白" },
],
//空数组之在的样式，设置了这个样式才能拖入
style: "min-height:120px;display: block;",
};
},
components: {
draggable,
},
created(){ },
methods: {
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
},
//获取拖入到的事件
statudd(va){
console.log(va)；
}
},
};
</script>
<style lang="scss" scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
background-color: #eee !important;
}
.chosenClass {
background-color: #eee !important;
opacity: 1 !important;
}
.dragClass {
background-color: #eee !important;
opacity: 1 !important;
box-shadow: none !important;
outline: none !important;
background-image: none !important;
}
.itxst {
margin: 10px;
display: flex;
div {
flex: 0 0 45%;
}
}
.title {
padding: 6px 12px;
}
.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;
}
.col {
margin: 12px;
width: 100%;
border: solid 1px #eee;
border-radius: 5px;
}
</style>