vue.draggable中文文档

#vue.draggable中文文档| 来源: 网络整理| 查看: 265

vue.draggable中文文档

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。

文档修订

2022-05-15 修订group属性文档，空数组无法拖入的问题

官方网站

https://github.com/SortableJS/Vue.Draggable

其他版本文档

非vue版中文文档请访问: sortable.js vue3版中文文档请访问: vue.draggable.next

文件下载

下载vuedraggable文件

下载sortable文件

下载vue文件

NPM或yarn安装方式

yarn add vuedraggablenpm i -S vuedraggable

UMD浏览器直接引用JS方式

属性说明

如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js里面有更详细的例子。

属性名称说明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属性设置成truechosenClass:ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedragClass:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成truedataIdAttrdataIdAttr: 'data-id'forceFallback默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为truefallbackClass默认false，克隆的DOM元素的类名allbackOnBody默认false，克隆的元素添加到文档的body中fallbackTolerance拖拽之前应该移动的pxscroll默认true,有滚动区域是否允许拖拽scrollFn滚动回调函数scrollSensitivity距离滚动区域多远时，滚动滚动条scrollSpeed滚动速度完整例子 {{drag?'拖拽中':'拖拽停止'}} {{element.name}} /*被拖拽对象的样式*/ .item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move; } /*选中样式*/ .chosen { border: solid 2px #3089dc !important; } //导入draggable组件 import draggable from 'vuedraggable' export default { //注册draggable组件 components: { draggable, }, data() { return { drag:false, //定义要被拖拽对象的数组 myArray:[ {people:'cn',id:1,name:'www.itxst.com'}, {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; }, }, };

在线试一试

浏览器umd开发模式 vue.draggable例子 /*被拖拽对象的样式*/ .item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move; } .item:hover { background-color: #f1f1f1; cursor: move; } /*选中样式*/ .chosen { border: solid 2px #3089dc !important; } {{drag?'拖拽中':'拖拽停止'}} {{element.name}} // 全局注册组件 Vue.component('vuedraggable', window.vuedraggable) var app = new Vue({ el: '#app', components: { vuedraggable: window.vuedraggable,//当前页面注册组件 }, data() { return { drag: false, myArray: [ { people: 'cn', id: 1, name: 'www.itxst.com' }, { 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; } } });

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章