0.1.25 • Published 1 year ago
ide-dragdrop v0.1.25
####设计器的拖拽能力 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
1 year ago
0.1.21
1 year ago
0.1.22
1 year ago
0.1.23
1 year ago
0.1.24
1 year ago
0.1.14
3 years ago
0.1.10
4 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
5 years ago
0.0.30
5 years ago
0.0.14
5 years ago
0.0.12
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago