先看效果
1、使用命令安装插件
yarn add vuedraggable或者
npm i -S vuedraggable
在页面中引入
import draggable from "vuedraggable";
export default {
name: "HelloWorld",
components: { draggable },
...
主要使用draggable组件实现
需要注意的属性:
v-model:列表的数组
属性名称 | 说明 |
---|---|
group | :group= “name”,相同的组之间可以相互拖拽或者 { name: “…”, pull: [true, false, ‘clone’, array , function], put: [true, false, array , function] } |
animation | 拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果 |
dragClass | 那些元素是可以被拖动的 |
ghostClass | 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
chosenClass | 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
左侧的待拖动列表
<draggable
v-model="arr1"
:group="groupA"
animation="300"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
>
<transition-group :style="style">
<div class="item" v-for="item in arr1" :key="item.id">
{{ item.name }}
</div>
</transition-group>
</draggable>
groupA: {
name: "itxst",
put: true, //可以拖入
pull: true,
},
标签绑定的css样式
.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;
}
右侧分组列表
分组其实就是树形结构的列表基本的一些设置其实大差不差
<div v-for="(item, index) in arr2" :key="index">
<div class="title">{{ item.title }}</div>
<draggable
v-model="item.chirden"
:group="groupB"
animation="300"
:scroll="true"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
>
<transition-group :style="style">
<div class="item" v-for="(ite, idx) in item.chirden" :key="idx">
{{ ite.name }}
</div>
</transition-group>
</draggable>
</div>
完整代码
<template>
<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"
>
<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 v-for="(item, index) in arr2" :key="index">
<div class="title">{{ item.title }}</div>
<draggable
v-model="item.chirden"
:group="groupB"
animation="300"
:scroll="true"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
>
<transition-group :style="style">
<div class="item" v-for="(ite, idx) in item.chirden" :key="idx">
{{ ite.name }}
</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "HelloWorld1",
components: { draggable },
data() {
return {
drag: false,
message: "",
groupA: {
name: "itxst",
put: true, //可以拖入
pull: true,
},
groupB: {
name: "itxst",
pull: true, //B组拖拽时克隆到A组
put: true,
},
//定义要被拖拽对象的数组
arr1: [
{ id: 1, name: "小石" },
{ id: 2, name: "小李" },
{ id: 3, name: "小张" },
{ id: 4, name: "小高" },
{ id: 5, name: "小马" },
{ id: 6, name: "小任" },
{ id: 7, name: "小郭" },
{ id: 8, name: "小冯" },
{ id: 9, name: "小王" },
{ id: 10, name: "小薛" }
],
arr2: [
{
title: "1组",
chirden: [],
},
{
title: "2组",
chirden: [],
},
{
title: "3组",
chirden: [],
},
{
title: "4组",
chirden: [],
},
],
//空数组之在的样式,设置了这个样式才能拖入
style: "min-height:120px;display: block;",
};
},
methods: {
//开始拖拽事件
onStart() {
this.drag = true;
return true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
},
},
};
</script>
<style 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;
}
.itxst 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>
这篇文章主要是为了记录,其实官方文档里的例子可以看看基本上三五分钟就能完事