vue-draggable组件教程:可拖拽滑动控制多列表的组件（类似SAP日报功能）
介绍
draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。
安装
1.首先，你需要有一个由vue-cil创建的vue项目，我这里使用我的一个开源前端进行展示，需要可自取。传送门
然后执行如下命令。
yarn add vuedraggable 或者 npm i -S vuedraggable
出现下图信息即为完成。
2.创建一个用于展示的页面并引入draggable组件。
1.import draggable from "vuedraggable"
2.components: { draggable },
具体如下：
<template>
<div id="view">
<div style="width: 100%;display: flex;align-items: center;justify-content: center"><h2>vue-draggable组件展示</h2></div>
<div style="width: 100%;">
</div>
</div>
</template>
<script>
import draggable from "vuedraggable"
export default {
name: "slidingList",
components: {
draggable
},
props: {
menu: '',
},
data() {
return {
}
},
methods: {
},
mounted() {
}
}
</script>
<style scoped>
#view {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
margin-top: 0.9375rem;
}
</style>
3. 添加组件使用与样式
直接给出具体代码大家看一下吧：
<template>
<div id="view">
<div style="width: 100%;display: flex;align-items: center;justify-content: center"><h2>vue-draggable组件展示</h2></div>
<div style="width: 100%;">
<!--使用draggable组件-->
<div class="itxst">
<div class="col">
<div class="title" >蜀国</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" >吴国</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" >魏国</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 arr3" :key="item.id">{
{
item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable"
export default {
name: "slidingList",
components: {
draggable
},
props: {
menu: '',
},
data() {
return {
drag:false,
//定义要被拖拽对象的数组
arr1:[
{
id:1,name:'张飞'},
{
id:2,name:'诸葛亮'},
{
id:3,name:'刘备'},
{
id:4,name:'关羽'}
],
arr2:[
{
id:5,name:'曹操'},
{
id:6,name:'曹丕'},
{
id:7,name:'张辽'},
{
id:8,name:'郭嘉'}
],
arr3:[
{
id:9,name:'孙权'},
{
id:10,name:'周瑜'},
{
id:11,name:'鲁肃'},
{
id:12,name:'陆逊'}
]
}
},
methods: {
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
mounted() {
}
}
</script>
<style scoped>
#view {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
margin-top: 0.9375rem;
}
/*定义要拖拽元素的样式*/
.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>
具体样式：
展示效果
最后
有几个指定注意的地方需要跟大家说一下：
- 如上列子中这三个数组中如果有一个被全部拖拽出去了。在想将其他的拖进来会比较困难，因为‘可选择空间’会非常小。
- 该组件还有很多响应事件和功能没有分享到，大家可以去这个网站查看相关api。点击进入
- 该组件支持的数组列是无上限的。如需要多个可以自行添加。
- 该例子后期将会同步更新到我的GitHub。传送门
如果觉得有帮助的话给个免费的点赞吧，Thanks♪(･ω･)ﾉ