vue.draggable浅尝

介绍

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',//组名为itxstpull: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}

在线试一试

完整代码

<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