Drag拖拽模块
Drag拖拽模块是基于Gesture模块的,实现任意元素之间相互拖放;支持dropping和dropped事件,支持自动回弹;没有使用原生的drag相关事件;支持移动端drag拖拽。
简单使用
默认mode=cut
,purpose=sort
,并且默认不使用起止占位节点;通过参数drops
进行设定可释放的节点。
-
-
-
new ax.Drag('#btn01',{
drops:'#box01',
});
基础节点配置
属性 |
类型 |
默认值 |
说明 |
from |
string |
null |
拖拽起始节点选择器 |
drops |
string/Node/Array |
'[droppable]' |
可拖放目标节点选择器 |
parent |
string |
null |
共同父节点选择器 |
data |
object |
{} |
传递的数据对象 |
拖拽行为配置
属性 |
类型 |
默认值 |
说明 |
mode |
'transfer'/'copy'/'none' |
'transfer' |
原节点处理方式 |
purpose |
'sort'/'embed'/'auto' |
'sort' |
拖拽目的 |
拖拽方向配置
属性 |
类型 |
默认值 |
说明 |
point.before |
array |
['t/3'] |
前置排序的进入方向 |
point.after |
array |
['b/3'] |
后置排序的进入方向 |
占位符配置
属性 |
类型 |
默认值 |
说明 |
holder.from |
boolean |
false |
是否显示起点占位节点 |
holder.to |
boolean |
false |
是否显示终点占位节点 |
指示箭头配置
属性 |
类型 |
默认值 |
说明 |
arrow.enable |
boolean |
false |
是否显示指示箭头 |
arrow.icon |
string |
'_icon-right' |
箭头图标类名 |
arrow.placement |
'left'/'right'/'top'/'bottom' |
'left' |
箭头位置 |
回调函数
属性 |
类型 |
默认值 |
说明 |
onMove |
function |
null |
鼠标移动回调 |
onEnter |
function |
null |
进入元素回调 |
onLeave |
function |
null |
离开元素回调 |