Vue.Draggable使用文档超详细总结

更新时间：2022年08月26日 09:54:32 作者：taoyouyou

Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件,下面这篇文章主要给大家介绍了关于Vue.Draggable使用文档的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

关于Vue.Draggable详细信息可以查看github地址

特性

支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时，可以抛出所有变化
可以和现有的UI组件兼容

安装

npm install vuedraggable

引入

import draggable from 'vuedraggable'

基础用法

定义一个json串 list，实现它的拖拽排序。

<draggable v-model="list">
    <transition-group>
        <div v-for="element in list" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

属性

参数	说明	类型	默认值
value	用于实现拖拽的list，通常和内部v-for循环的数组为同一数组	Array	null
list	效果同value的。和v-model不能共用	Array	null
tag	draggable 标签在渲染后展现出来的标签类型	String	div
options	draggable 列表配置项	Object	null
emptyInsertThreshold	拖动时，鼠标必须与空的可排序对象之间的距离	Number	5
clone	返回值为true时克隆，可以理解为正常的拖拽变成了复制。当pull:'clone时的拖拽的回调函数’	Function	无处理
move	如果不为空，这个函数将以类似于Sortable onMove回调的方式调用。返回false将取消拖动操作。	Function	null
componentData	用来结合UI组件的，可以理解为代理了UI组件的定制信息	Object	null

注意：vuedraggable新版本废弃了options属性，建议使用v-bind属性作为配置项

options配置项

参数	说明	类型
group	用于分组，同一组的不同list可以相互拖动	String/Array
sort	定义是否可以拖拽	Boolean
delay	定义鼠标选中列表单元可以开始拖动的延迟时间	Number
disabled	定义是否此sortable对象是否可用	Boolean
animation	动画时间单位:ms	Number
handle	使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动	Selector
filter	定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔	Selector
preventOnFilter	当拖动filter时是否触发event.preventDefault() 默认触发	Boolean
draggable	定义哪些列表单元可以进行拖放	Selector
ghostClass	当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class	Selector
chosenClass	目标被选中时添加	Selector
dragClass	目标拖动过程中添加	Selector
forceFallback	如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等	Boolean
fallbackClass：	当forceFallback设置为true时，拖放过程中鼠标附着单元的样式	String
dataIdAttr	data-id	Selector
scroll	当排序的容器是个可滚动的区域，拖放可以引起区域滚动	Boolean
scrollFn	用于自定义滚动条的适配	Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
ScrollSensitivity	就是鼠标靠近边缘多远开始滚动默认30	Number
scrollSpeed	滚动速度	Number

事件

参数	说明	回调参数
start	开始拖动时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
add	添加单元时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
remove	单元被移动到另一个列表时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
update	排序发生变化时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
end	拖动结束时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
choose	选择单元时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
sort	排序发生变化时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
filter	尝试选择一个被filter过滤的单元的回调函数	function（{to,from,item,clone,oldIndex,newIndex})
clone	clone时的回调函数	function（{to,from,item,clone,oldIndex,newIndex})

插槽

页眉或页脚插槽都不能与 tarnstion-group 一起使用。

Header

使用标题插槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用来标记draggable元素。请注意，无论标题槽在模板中的位置如何，它总是被添加到默认槽之前。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

Footer

使用页脚槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用，以标记draggable元素。请注意，无论页脚槽在模板中的位置如何，它都将始终添加到默认槽之后。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>

总结

到此这篇关于Vue.Draggable使用文档超的文章就介绍到这了,更多相关Vue.Draggable使用文档内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现实时上传文件进度条
这篇文章主要为大家详细介绍了vue实现实时上传文件进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue分别运用class绑定和style绑定通过点击实现样式切换
这篇文章主要为大家介绍了Vue分别运用class绑定和style绑定通过点击实现样式切换，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
vue中路由跳转的方式有哪些你知道吗
这篇文章主要为大家介绍了vue路由跳转的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
基于Electron24+Vite4+Vue3搭建桌面端应用实战教程
这篇文章主要介绍了基于Electron24+Vite4+Vue3搭建桌面端应用,这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序，需要的朋友可以参考下
2023-05-05
vue实现页面div盒子拖拽排序功能
本文主要介绍了vue实现页面div盒子拖拽排序功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue百度地图 + 定位的详解
这篇文章主要介绍了vue百度地图 + 定位的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
一文带你上手Vue新的状态管理Pinia
Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了，Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，本文就来讲讲它的具体使用吧
2023-04-04
关于element-ui 单选框默认值不选中的解决
这篇文章主要介绍了关于element-ui 单选框默认值不选中的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue微信分享到朋友圈 vue微信发送给好友
这篇文章主要为大家详细介绍了vue微信分享到朋友圈，vue微信发送给好友功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
element-ui滚动条el-scrollbar置底方式
这篇文章主要介绍了element-ui滚动条el-scrollbar置底方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08