介绍
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。
官方网站
https://github.com/SortableJS/Vue.Draggable
npm或yarn 安装方式
yarn add vuedraggable
npm i -S vuedraggable
UMD浏览器直接引用JS方式
<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>
属性说明
属性名称 | 说明 |
---|---|
group | :group= "name",相同的组之间可以相互拖拽 或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] } |
sort | :sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序 |
delay | :delay= "0", 鼠标按下后多久可以拖拽 |
touchStartThreshold | 鼠标移动多少px才能拖动元素 |
disabled | :disabled= "true",是否启用拖拽组件 |
animation | 拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果 |
handle | :handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动 |
filter | :filter=".unmover" 设置了unmover样式的元素不允许拖动 |
draggable | :draggable=".item" 那些元素是可以被拖动的 |
ghostClass | :ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
chosenClass | :ghostClass="hostClass" 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
dragClass | :dragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
dataIdAttr | dataIdAttr: 'data-id' |
forceFallback | 默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true |
fallbackClass | 默认false,克隆的DOM元素的类名 |
allbackOnBody | 默认false,克隆的元素添加到文档的body中 |
fallbackTolerance | 拖拽之前应该移动的px |
scroll | 默认true,有滚动区域是否允许拖拽 |
scrollFn | 滚动回调函数 |
scrollSensitivity | 距离滚动区域多远时,滚动滚动条 |
scrollSpeed | 滚动速度 |
完整例子
html
<div id="app">
<div>{{drag?'拖拽中':'拖拽停止'}}</div>
<draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000"
@start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
</transition-group>
</draggable>
</div>
css
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
&:hover {
background-color: #f1f1f1;
cursor: move;
}
}
.chosen {
border: solid 2px #3089dc !important;
}
js
// 全局注册组件
new Vue({
el: '#app',
data() {
return {
drag: false,
myArray: [
{ people: 'cn', id: 1, name: 'www.itxst.com',sort: false },
{ people: 'cn', id: 2, name: 'www.baidu.com' },
{ people: 'cn', id: 3, name: 'www.taobao.com' },
{ people: 'us', id: 4, name: 'www.google.com' }
]
};
},
methods: {
onStart() {
this.drag = true;
},
onEnd() {
this.drag = false;
}
}
})
成果
在线尝试
两列或多列之间相互拖动
vue.draggable作为一款强大的vue拖拽组件,可以满足呢对网页上元素的拖拽需求,本文将介绍两两列或多列之间相互拖动,比如把某些角色或用户拖拽到每个权限组实现一些比较炫酷的效果。
关键点group属性
//两列组件设置相同的group名就可以相互拖拽了
<draggable v-model="arr1" group="site">
<transition-group>
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
//group属性:
//设置方式一,直接设置组名
group:'itxst'
//设置方式,object,也可以通过自定义函数function实现复杂的逻辑
group:{
name:'itxst',//组名为itxst
pull:true|false|function,//是否允许拖入当前组
put:true|false|function,//是否允许拖出当前组
}
在线试一试
拖入空数组的问题
//当有个数组为空时,需要设置 transition-group 的高度才能拖入这个空数组
//style 等于 min-height:120px;display: block;
<draggable v-model="arr2" group="site" 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.id">{{item.name}}</div>
</transition-group>
</draggable>
在线试一试
控制A组只能拖出不能拖入
<draggable v-model="arr1" :group="grpupA" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group :style="style">
<div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
//设置:group="grpupA"只能拖出
grpupA:{
name:'site',
pull:true,
put:false
}
在线试一试文章来源:https://www.toymoban.com/news/detail-649161.html
完整代码
<template>
<div>
<!--使用draggable组件-->
<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" @start="onStart" @end="onEnd">
<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 class="title" >B组(本组是个空数组)</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.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag:false,
groupA:{
name:'site',
pull:true, //可以拖从
put:true//可以拖出
},
groupB:{
name:'site',
pull:true,
put:true
},
//定义要被拖拽对象的数组
arr1:[
{id:1,name:'www.itxst.com'},
{id:2,name:'www.jd.com'},
{id:3,name:'www.baidu.com'},
{id:3,name:'www.taobao.com'}
],
arr2:[], //空数组
//空数组之在的样式,设置了这个样式才能拖入
style:'min-height:120px;display: block;'
};
},
methods: {
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
};
</script>
<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>
参考文档
vue.draggable中文文档 - itxst.com文章来源地址https://www.toymoban.com/news/detail-649161.html
到了这里,关于vue.draggable浅尝的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!