0.1.25 • Published 9 months ago

ide-dragdrop v0.1.25

Weekly downloads
1
License
ISC
Repository
-
Last release
9 months ago

####设计器的拖拽能力 nid要保持唯一,对于tab等组件既存在头部又存在内容区的,内容区要在原有nid基础上增加_body,选中内容区返回的nid会将_body去掉。

DND.init({
    dragShowBorder:true,//拖拽过程中是否显示目标边框和标题名
    
    //初始化完成后触发的事件
    onInitFinish:function(){},
    
    //当拖动开始时触发的事件
    onDragStart:function({
        event,   //事件对象
        dragtype,//拖拽类型create-创建、move-移动
        elem,      //为dom元素
        nid,     //为组件的nid值
        uiType   //为组件的uitype值
    }){},
    
    //当拖拽结束时触发的事件
    onDragEnd:function({
        event,
        dragtype,//拖拽类型create-创建、move-移动,当为false表示不允许放置
          selected: {//拖抓的目标
            elem,
            nid,
            uiType,
          },
          target: {//放置的目标
            elem,
            nid,
            uiType
          },
          position  //放置的位置
    }){},
    
    //当画布中组件元素被选中时触发的事件
    onChoose:function({
        event,
        elem,
        nid,
        uiType
    }){},
    
    //当点击删除按钮时触发的事件
    onDelete:function({
        event,
        elem,
        nid,
        uiType
    }){},
    /**
     * 自定义判断当前拖抓元素是否可放置在目标元素上
     * @return true,则允许放置
     * @return false,则不允许放置
     * @return undefined,则走默认判定
     */
    onCanDrop:function({
        isCan,//默认判定出的是否可放置的结果
        dragNid,//抓取目标的nid
        dragUiType,//抓取目标的uitype
        dragUiData:{//抓取目标的uidata
            isPart, //是否部件
            isExt,  //是否扩展组件
            source  //原始数据
        },
        targetNid,//放置目标的nid
        targetUiType,//放置目标的uitype
        targetUiParams,//放置目标的uiparams
        tplTree,//层次树数据
        initData//初始化的全局数据
    }){},
    /**
     *自定义判断当前拖抓元素进过目标元素时显示的可插入位置点 
     *@return true则表示显示上下插入点,false则显示左右插入点
     */
    onDropPosition:function({
        event,
        dragNid,//抓取目标的nid
        dragUiType,//抓取目标的uitype
        dragUiData:{//抓取目标的uidata
            isPart, //是否部件
            isExt,  //是否扩展组件
            source  //原始数据
        },
        targetElem,//放置目标的dom元素
        targetNid,//放置目标的nid
        targetUiType,//放置目标的uitype
        targetUiParams,//放置目标的uiparams
        tplTree,//层次树数据
        initData//初始化的全局数据
    }){},
    
    //自定义扩展按钮被点击时触发的事件
    onButtonClick:function({
        event,
        elem,
        nid,
        uiType,
        buttonKey,//自定义按钮的键值
    }){}
});

####特殊说明 1.需要支持拖拽能力的DOM元素必须生成nid、uitype属性,例如:

<div nid="nid_1581070621610_1" uitype="button"></div>

2.由于拖拽默认会拦截所有点击事件,如需要在一些DOM元素上实现自定义点击,必须生成dndclickarrow属性,例如:

<div dndclickarrow  click="javascript:function(){alert('自定义点击事件')}"></div>
0.1.25

9 months ago

0.1.21

10 months ago

0.1.22

10 months ago

0.1.23

10 months ago

0.1.24

10 months ago

0.1.14

3 years ago

0.1.10

3 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.0.42

4 years ago

0.0.33

4 years ago

0.0.30

4 years ago

0.0.14

4 years ago

0.0.12

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago