尤雨溪都在推荐的 vue 拖拽库！ -63棋牌

最近看到尤雨溪推荐了一个基于 vue 的拖拽库：vuedraggableplus，本文就来看看这个拖拽库有什么特别之处！

概念

sortablejs 是一个非常流行的拖拽库，不过这个库的 vue 3 版本已经三年没更新了，可以说是已经跟 vue 3 严重脱节，所以诞生了这个项目，这个组件是基于 sortablejs 的。

在 sortablejs 官方以往的 vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当使用一些组件库时，如果组件库中没有提供列表根元素的插槽，就很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 sortablejs 的 container。

vuedraggableplus 是一个支持 vue2 和 vue3 的拖拽库，它具有以下特性：

• 功能齐全：全面继承 sortable.js 的所有功能
• 无缝迁移：适用于 vue 3 和 vue2
• 灵活使用：支持组件、指令、函数式调用，总有一款是您喜欢的
• 类型强：用 typescript 编写，带有完整的 ts 文档
• 双向绑定：支持 v-model 双向绑定
• 自定义容器：将指定容器作为拖拽容器

使用

在使用 之前，需要使用以下 npm 命令进行安装：

npm install vue-draggable-plus

vuedraggableplus 支持通过组件、指令、hooks方式使用：

• 组件方式：

• hooks 方式：

• 指令方式：

vuedraggableplus 提供非常多的 api：

参数	说明	类型	默认值
animation	拖动时显示动画	number	0
chosenclass	被选中项的 css 类名	string	'sortable-chosen'
delay	选中拖拽延时	number	0
delayontouchonly	touch 事件延迟	number	0
direction	拖拽方向，默认自动判断	'vertical'\	'horizontal'
disabled	是否禁止拖拽	boolean	false
dragclass	拖拽项类名	string	'sortable-drag'
draggable	指定元素内的哪些项目应该是可拖动的	string	-
emptyinsertthreshold	拖动时鼠标必须与空可排序项的距离（以像素为单位）,以便将拖动元素插入到该可排序项中, 设置为0禁用此功能。	number	5
easing	简化动画。	easing	-
fallbackclass	当使用forcefallback的时候，被复制的dom的css类名	string	sortable-fallback
fallbackonbody	将cloned dom 元素挂到body元素上。	boolean	false
fallbacktolerance	以像素为单位指定鼠标在被视为拖动之前应该移动多远。	number	0
filter	不需要进行拖动的元素	string	-
forcefallback	忽略 html5拖拽行为，强制回退	boolean	false
ghostclass	drop placeholder的css类名	string	'sortable-ghost'
group	要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方ts类型定义	group	-
handle	设置可拖拽句柄的css类名，如果不设置，默认对目标元素的子列表操作进行拖拽	string	-
invertswap	如果设置为 true，将始终使用反向交换区	boolean	false
invertedswapthreshold	反向交换阈值，默认情况下将设置为swapthreshold 值	number	-
preventonfilter	触发filter时调用event.preventdefault()	boolean	true
removecloneonhide	删除不显示的克隆元素，而不是仅仅隐藏它	boolean	true
sort	定义列表单元是否可以在列表容器内进行拖拽排序	boolean	true
swapthreshold	交换区的阈值	number	1
touchstartthreshold	在取消延迟拖动事件之前点应该移动多少像素	number	1
setdata	传递一个函数，函数的第一个参数为datatransfer类型，第二个参数为htmlelement 类型	function
scroll	是否启用滚动	boolean\	htmlelement
scrollfn	自定义滚动	scrollfn	-
scrollsensitivity	鼠标必须离边缘多近才能开始滚动，单位 px	number	-
scrollspeed	滚动速度(ms/px)	number	-
bubblescroll	将自动滚动应用于所有父元素，以便更轻松地移动	boolean	true
onchoose	元素被选中	((event: sortableevent) => void)	-
onunchoose	元素取消选中	((event: sortableevent) => void)	-
onstart	元素开始拖拽	((event: sortableevent) => void)	-
onend	元素取消拖拽	((event: sortableevent) => void)	-
onadd	元素从一个列表拖拽到另一个列表	((event: sortableevent) => void)	-
onupdate	元素顺序更新时触发	((event: sortableevent) => void)	-
onsort	列表的任何更改都会触发	((event: sortableevent) => void)	-
onremove	元素从列表中移除进入另一个列表	((event: sortableevent) => void)	-
onfilter	试图拖拽一个filtered的元素	((event: sortableevent) => void)	-
onmove	拖拽移动的时候触发	((event: moveevent,originalevent: event) => void)	-
onclone	克隆一个元素时触发	((event: sortableevent) => void)	-
onchange	拖拽元素改变位置时触发	((event: sortableevent) => void)	-

开源地址：

github：https://github.com/alfred-skyblue/vue-draggable-plus