vue.draggable拖动插件的使用
前言
在Vue的一些项目里面需要对元素进行拖动的处理，可以使用之前的SortableJs来实现，这里介绍一些vue.draggable的实现以及一些配置
下载
首先我们需要在Vue里面下载好需要的包：
npm i -S vuedraggable
或者使用cdn的方式引入：
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
示例
在干净的Vue2.x界面书写下面简单的代码
<template>
<div id="app" style="padding: 10px">
<!--使用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="100"
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>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
data() {
return {
drag: false,
arr1: [
{ id: 1, name: '左侧盒子一' },
{ id: 2, name: '左侧盒子二' },
{ id: 3, name: '左侧盒子三' },
{ id: 4, name: '左侧盒子四' }
],
arr2: [
{ id: 1, name: '右侧盒子一' },
{ id: 2, name: '右侧盒子二' },
{ id: 3, name: '右侧盒子三' },
{ id: 4, name: '右侧盒子四' }
]
}
},
methods: {
onStart() {
this.drag = true
},
onEnd() {
this.drag = false
}
},
components: {
draggable
}
}
</script>
<style lang="less" scoped>
.ghostClass {
background-color: blue !important;
}
.chosenClass {
background-color: black !important;
color: white !important;
}
.dragClass {
background-color: skyblue !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>
主要的使用方法就是引入好组件：
import draggable from 'vuedraggable'
再注册好组件：
components: {draggable}
后面直接使用标签即可，在标签上面配置好相应的方法，内部的内容使用<transition-group>包裹
属性列表
对于draggable的属性列表主要有以下：
group属性
// 设置方式一，直接设置组名
group:’itxst’
//设置方式，object，也可以通过自定义函数function实现复杂的逻辑
group:{ name:’itxst’, //组名为itxst
pull: true|false| ‘clone’|array|function, //是否允许拖出当前组
put:true|false|array|function, //是否允许拖入当前组 }
delay鼠标按下后等待n秒才允许拖动，此属性可以一定程度上防止误触操作，比如设置delay为1000表示按下
一秒后才允许拖动。
disabled属性实现开启或禁用vue.draggable的拖拽效果。
scroll属性容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动，默认为true
animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬，默认为0。
handle属性当鼠标落在handle指定的元素上面时才允许拖动
filter属性如果你想设置某个元素或对象不允许拖动拖拽把这些元素的样式名称设置到filter属性即可，本文将实现包含forbid样式的元素将无法拖动,第一行无法拖动,也无法拖动到第一行，用到filter和move属性
chosenClass属性设置选中元素的样式，可以通过自定义样式来方便的区分出那个元素被选中。
ghostClass属性目标位置占位符的样式及需要停靠位置的样式。
clone属性实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。
事件列表
start 开始拖动时触发的事件
add 从一个数组拖拽到另外一个数组时触发的事件
remove 移除事件
update 拖拽变换位置时触发的事件
end 拖拽完成时的事件
choose 鼠标点击选中要拖拽元素时的事件
unchoose 选中后松开鼠标的事件
sort 位置变化时的事件
clone 从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素
最后附上中文网的地址供参考：<vue.draggable中文文档 - itxst.com>
