Drag拖拽模块

2024-08-06 15:24:06首发，2周前更新

Drag拖拽模块是基于Gesture模块、Flip模块和原生drag/drop事件的，实现任意元素之间相互拖放；支持诸多drag和drop事件，支持自动回弹；支持在桌面端使用原生拖拽事件；支持移动端drag拖拽。

前言

元素的可拖拽性改变了用户输入代码来改变数据状态的操作方式，就像用户天然喜欢Windows可视界面而排斥DOS界面一样，以拖拽代替输入操作，可以极大提高用户的操作体验。

本框架有很多模块使用了拖拽功能，比如向Tree、Menu等树结构的模块，所以本框架也有自己的Drag拖拽模块，用来支撑整个框架的元素可拖拽能力。

本框架的Drag模块的核心来自Gesture模块、Flip模块和原生drag/drop事件三大模块组合；Gesture模块用来自适应桌面端和移动端的鼠标/手指事件；Flip模块用来生成拖拽动画；原生drag/drop事件用来在桌面端使用原生事件完成拖拽。

本框架的拖拽模块特色如下：

• 支持sort、swap、embed和auto五种节点转移模式，其中auto自动识别clone和cut
• 支持hover和drop两种转移节点行为
• 支持显示落点占位节点
• 支持显示空列表占位节点
• 支持多种drag/drop事件
• 支持自定义拖拽结果
• 支持多Drag实例相互拖拽

普通排序

不使用其他参数，默认为Flip拖拽排序

释放排序

默认的Flip拖拽排序是实时悬浮排序的，如果需要在释放的时候才排序，可设置参数method，该参数默认值为'hover'，可设为'drop'。

相比普通排序，释放排序有一个特性：当释放落点是在其父容器时，将直接append进目父容器（appendChild）。

多实例联动

如果需要多实例之间相互拖拽，则拖拽节点需要共享，此时需要对多实例的参数group设置相同的值。

基础配置

参数名	类型	默认值	说明
original	boolean	true	是否使用原生拖拽事件（PC端使用drag/drop，移动端使用touch）
group	string	''	定义可互相拖拽的实例组标识
throttle	number	100	拖拽过程中的节流时间（ms）
duration	number	200	拖拽释放后的动画时长（ms）

节点选择器

参数名	类型	默认值	说明
drags	string/Element[]	''	可拖拽元素选择器，默认[dragnode]
drops	string/Element[]	''	可放置目标选择器，默认[dropnode]
parent	string/Element	''	drags/drops的共同父节点选择器
wraps	string/Element[]	''	可接收空拖放的容器选择器
handle	string	''	拖拽触发手柄选择器
ignore	string/Element[]	''	禁止拖拽的元素选择器

拖拽行为

参数名	类型	默认值	说明
method	string	'hover'	节点转移时机：'hover'(悬停时)/'drop'(释放时)
purpose	string	'auto'	拖拽目的：'sort'(排序)/'embed'(嵌入)/'swap'(交换)/'auto'(自动)
showEmpty	boolean	true	是否显示空列表占位符
pullable	boolean	true	是否允许从其他区域拖入

高级配置

参数名	类型	默认值	说明
embed	object	{position:'after',selector:''}	节点嵌入配置
pushable	boolean/object	{enable:true,intent:'cut'}	节点推出配置
point	object	{before:['t/3','t/2'],after:['b/3','b/2']}	插入位置判定点
holder	boolean/object	{enable:false,style:[]}	占位符配置
arrow	boolean/object	{enable:false,icon:'_icon-right',placement:'left',selector:''}	指示箭头配置
gesture	object	{}	手势模块配置
flip	boolean/object	{enable:true,fluct:-100}	翻转动画配置

等待函数

参数名	类型	默认值	说明
b4Drop	Function	null	释放前等待函数
b4Trigger	Function	null	触发前等待函数

事件回调

参数名	类型	默认值	说明
onDragStart	Function	null	开始拖拽事件
onDragEnter	Function	null	进入有效区域事件
onDragLeave	Function	null	离开有效区域事件
onDragMove	Function	null	拖拽移动事件
onDropped	Function	null	释放事件
onDragEnd	Function	null	拖拽结束事件
onDragCancel	Function	null	拖拽取消事件
onTransferred	Function	null	节点转移完成事件
onSwapped	Function	null	节点交换完成事件
onEmbeded	Function	null	节点嵌入完成事件
onSorted	Function	null	节点排序完成事件
onCloned	Function	null	节点克隆完成事件
onTrigger	Function	null	拖拽触发事件
onFinished	Function	null	拖拽完全结束事件
onDragOut	Function	null	拖至无效区域事件
onDropOut	Function	null	无效区域释放事件

所有回调函数都支持相关的事件参数，包含 target（目标）、source（源）、point（坐标）、event（事件对象）等信息。