滨州 网站建设,中宁网站建设公司,同城推广平台,基本建设工程兵网站介绍 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动#xff0c;可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作#xff0c;总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的…介绍 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 srchttps://www.itxst.com/package/vue/vue.min.js/script script srchttps://www.itxst.com/package/sortable/Sortable.min.js/script script srchttps://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拖动时的动画效果还是很酷的,数字类型。如设置animation1000表示1秒过渡动画效果handle :handle.mover 只有当鼠标移动到css为mover类的元素上才能拖动filter:filter.unmover 设置了unmover样式的元素不允许拖动draggable:draggable.item 那些元素是可以被拖动的ghostClass:ghostClassghostClass 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效并把forceFallback属性设置成truechosenClass:ghostClasshostClass 被选中目标的样式你的自定义样式可能需要加!important才能生效并把forceFallback属性设置成truedragClass:dragClassdragClass拖动元素的样式你的自定义样式可能需要加!important才能生效并把forceFallback属性设置成truedataIdAttrdataIdAttr: data-idforceFallback默认false忽略HTML5的拖拽行为因为h5里有个属性也是可以拖动你要自定义ghostClass chosenClass dragClass样式时建议forceFallback设置为truefallbackClass默认false克隆的DOM元素的类名allbackOnBody默认false克隆的元素添加到文档的body中fallbackTolerance拖拽之前应该移动的pxscroll默认true,有滚动区域是否允许拖拽scrollFn滚动回调函数scrollSensitivity距离滚动区域多远时滚动滚动条scrollSpeed滚动速度
完整例子
html
div idappdiv{{drag?拖拽中:拖拽停止}}/divdraggable v-modelmyArray chosen-classchosen force-fallbacktrue grouppeople animation1000startonStart endonEndtransition-groupdiv classitem v-forelement in myArray :keyelement.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-modelarr1 groupsitetransition-groupdiv classitem v-foritem in arr1 :keyitem.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-modelarr2 groupsite animation300 dragClassdragClass ghostClassghostClass chosenClasschosenClass startonStart endonEndtransition-group :stylestylediv classitem v-foritem in arr2 :keyitem.id{{item.name}}/div/transition-group
/draggable
在线试一试
控制A组只能拖出不能拖入 draggable v-modelarr1 :groupgrpupA animation300 dragClassdragClass ghostClassghostClass chosenClasschosenClass startonStart endonEndtransition-group :stylestylediv classitem v-foritem in arr1 :keyitem.id{{item.name}}/div/transition-group
/draggable
//设置:groupgrpupA只能拖出grpupA:{name:site,pull:true,put:false}
在线试一试
完整代码
templatediv
!--使用draggable组件--
div classitxst
div classcoldiv classtitle 把下面元素拖拽到B组试试看/divdraggable v-modelarr1 :groupgroupA animation300 dragClassdragClass ghostClassghostClass chosenClasschosenClass startonStart endonEndtransition-group :stylestylediv classitem v-foritem in arr1 :keyitem.id{{item.name}}/div/transition-group
/draggable /divdiv classcoldiv classtitle B组本组是个空数组/divdraggable v-modelarr2 :groupgroupB animation300 dragClassdragClass ghostClassghostClass chosenClasschosenClass startonStart endonEndtransition-group :stylestylediv classitem v-foritem in arr2 :keyitem.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.dragtrue;},//拖拽结束事件onEnd() {this.dragfalse;},},
};
/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
