Drag拖拽模块

Drag拖拽模块是基于Gesture模块的,实现任意元素之间相互拖放;支持dropping和dropped事件,支持自动回弹;没有使用原生的drag相关事件;支持移动端drag拖拽。

简单使用

默认mode=cutpurpose=sort,并且默认不使用起止占位节点;通过参数drops进行设定可释放的节点。

  • 输出
  • HTML
  • JS
  • 拖拽我
    拖进来看看
  •                 
                    
                
  •                 
                        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 离开元素回调