page-design-core
Install & Usage
npm install --save page-design-core
import {PageDesignCore} from 'page-design-core';
...
render(){
return (
<PageDesignCore>
...
</PageDesignCore>
);
}
...
PageDesignCore Options
children
ReactNode | (model: Model) => JSX.Element
defaultValue
Item[]
项目列表
value
Item[]
受控属性,项目列表
axis
"vertical" | "horizontal" | "both"
默认:vertical
影响DropItem
的hoverDirection
计算方式。
- 为
vertical
时hoverDirection
有效值为:"up" | "bottom" | "none"
- 为
horizontal
时hoverDirection
有效值为:"left" | "right" | "none"
- 为
both
时hoverDirection
有效值为:""up" | "bottom" | left" | "right" | "none"
示例:
<DropItem>
{({hoverDirection}) => <div/>}
</DropItem>
commitAction
"auto" | "drop"
默认:auto
区别:
auto
:拖拽过程中实时改变拖拽目标的位置drop
:拖拽过程中不改变位置,释放目标后改变拖拽目标位置
如果设置为
drop
时,通常需要配合hoverDirection
来实现拖拽的视觉效果
idField
string
默认:id
如果指定属性不存在则会随机生成
pidField
string
默认:pid
如果指定属性不存在默认为null
onChange
(items: Item[]) => void
拖拽项目位置改变时触发
onDragStart
(e: DragStartEvent) => void
开始拖拽时触发
DragStartEvent.type
拖拽模式:add
(新增模式,DragItem
触发) 或sort
(排序模式,DropItem
触发)DragStartEvent.item
拖拽项目DragStartEvent.dom
拖拽项目 DOM 元素DragStartEvent.component
拖拽项目对象DragStartEvent.monitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitorDragStartEvent.model
数据模型对象Model
onDragEnd
(e: DragEndEvent) => void
拖拽项目释放时触发,触发晚于onDrop
属性同onDragStart
onDropToItem
(e: DropToItemEvent) => void
拖拽项目释放到DropItem
时触发
属性同onDragStart
,另外两个属性:
DropEvent.target: Item
释放目标项目DropEvent.targetDOM
释放目标 DOM 元素
onDropToContainer
(e: DropToContainerEvent) => void
拖拽项目释放到DropContainer
时触发
属性同onDragStart
,另外两个属性:
DropEvent.target: string | number | null
释放目标项目DropEvent.targetDOM: HTMLElement
释放目标 DOM 元素
onDrop
(e: DropEvent) => void
拖拽项目释放到DropItem
或DropContainer
时触发
属性同onDragStart
,另外两个属性:
DropEvent.target: Item | string | number | null
释放目标项目DropEvent.targetDOM
释放目标 DOM 元素
注:当释放目标为
DropContainer
时DropEvent.target
的类型为string | number | null
,如果释放目标为DropItem
是DropEvent.target
的类型为Item
所以在接收时注意要对
DropEvent.target
类型进行判断,eg:isObject(target) ? xx : yy
onDragHoverContainer
(e: DragHoverContainerEvent) => void
拖拽项目经过DropContainer
时触发
onDragHoverItem
(e: DragHoverItemEvent) => void
拖拽项目经过DropItem
时触发
onDragHover
(e: DragHoverEvent) => void
拖拽项目经过DropContainer
或DropItem
时触发
属性同onDrop
DropContainer Options
id
string | number | null
默认:null
容器 ID,当项目释放到当前容器时,该项目的pid
会自动设置为当前容器的id
当
DropContainer
存在嵌套的情况下,子DropContainer
的id
必须设置
children
ReactNode | (props: DropContainerRenderProps) => JSX.Element
children 为函数时,props
参数说明:
props.monitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitorprops.isOver: boolean
拖拽项目是否经过当前组件,效果同monitor.isOver()
props.isStrictlyOver: boolean
拖拽项目是否经过当前组件(不进行冒泡),效果同monitor.isOver({ shallow: true })
props.model
数据模型对象Model
props.connectDropTarget: (dom) => void
拖拽释放关联,使指定 DOM 元素具备接收drop
能力。 eg:connectDropTarget(dom)
props.items: Item[]
当前容器的子项目,效果类似model.getChildren(id)
,但不建议通过model
的方式自行获取props.canDrop: boolean
当前容器是否能接收目标boolean
render
(props: DropContainerRenderProps) => JSX.Element
作用同children
,优先级低于children
axis
作用同 Provider Options
的axis
,但DropContainer
的优先级高
canDrop
(props: CanDropOptions) => boolean
限制DropContainer
是否能接收拖拽项目
CanDropOptions.item
拖拽项目CanDropOptions.dom
拖拽项目 DOM 元素CanDropOptions.monitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitorCanDropOptions.model
数据模型对象Model
CanDropOptions.component
当前DropContainer
对象
注:
canDrop
和connectDropTarget
实现效果类似
hover
(props: CanDropOptions) => boolean
拖拽项经过容器时触发,包含冒泡,参数同 canDrop
注:是否经过当前组件时可通过
monitor.isOver({ shallow: true })
判断,否则就是通过冒泡响应
drop
(props: CanDropOptions) => boolean
拖拽释放到当前容器时触发,包含冒泡,参数同 canDrop
注:有可能是释放到当前容器下的子容器。
monitor.didDrop()
可判断
DropItem Options
item
Item
必填 项目对象,
children
ReactNode | (props: DropItemRenderProps) => JSX.Element
children 为函数时,props
属性说明:
item:Item
项目对象isDragging: boolean
当前组件是否处于拖拽中isOver: boolean
推拽中的项目是否正经过当前组件,可能是冒泡触发,效果同monitor.isOver()
isStrictlyOver: boolean
推拽中的项目是否正经过当前组件,效果同monitor.isOver({ shallow: true })
canDrop: boolean
当前组件是否能接收拖拽目标目标,只有使用了connectDropTarget
才可能为true
hoverDirection: "up" | "down" | "left" | "right" | "none"
拖拽项目经过当前组件所在的位置,通过对角线进行分割的四块区域。受axis
影响isTmp: boolean
拖拽节点处于未提交状态,通常在拖拽DragItem
时有效,如果不是自行操作 model,那么当前字段基本都为false
model: Model
数据模型对象monitor: DragSourceMonitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitorconnectDropTarget:dom => void
使指定 DOM 元素具备接收drop
能力。connectDragSource:dom => void
使指定 DOM 元素具备拖拽drag
的能力。connectDragPreview:dom => void
使用指定的 DOM 元素作为drag
的预览效果,如果不设置则使用系统默认,通常情况不需要设置,但下在配合DragLayer
下一般使用一个透明图片作为占位符,例如:connectDragPreview(getEmptyImage())
。connectDragAndDrop:dom => void
使指定 DOM 元素具备drag
和drop
能力。
render
作用同children
,优先级低于children
axis
作用同 Provider Options
的axis
,优先级最高
canDrop
作用同 DropContainer Options
的canDrop
hover
作用同 DropContainer Options
的hover
canDrag
(props: CanDragOptions) => boolean
DropItem
是否能能拖拽,props
属性如下:
monitor:DragSourceMonitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitormodel: Model
数据模型对象component: DropItem
当前DropItem
对象
beginDrag
(props: BeginDragOptions) => void
当前组件拖拽前触发,属性作用同 DropContainer Options
的canDrop
endDrag
(props: EndDragOptions) => void
当前组件拖拽结束后触发,触发时机晚于比drop
,属性作用同 DropContainer Options
的canDrop
DragItem Options
getInstance
() => Item
必填
当前组件拖拽时触发调用,需要返回一个Item
实例。
children
ReactNode | (props: DragItemRenderProps) => JSX.Element
children 为函数时,props
属性说明:
isDragging: boolean
当前组件是否处于拖拽中model: Model
数据模型对象monitor: DragSourceMonitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitorconnectDragSource:dom => void
使指定 DOM 元素具备拖拽drag
的能力。connectDragPreview:dom => void
使用指定的 DOM 元素作为drag
的预览效果,如果不设置则使用系统默认,通常情况不需要设置,但下在配合DragLayer
下一般使用一个透明图片作为占位符,例如:connectDragPreview(getEmptyImage())
。
render
作用同children
,优先级低于children
canDrag
作用同 DropItem Options
的canDrag
beginDrag
作用同 DropItem Options
的beginDrag
endDrag
作用同 DropItem Options
的endDrag
DragLayer
ReactNode | (props: DragItemRenderProps) => JSX.Element
children 为函数时,props
属性说明:
item: Item | null
如果不为null
的情况,item 组件处于拖拽中dom: HTMLElement | null
如果不为null
的情况,为拖拽中组件的 DOM 元素isDragging: boolean
组件是否处于拖拽中。monitor: DragLayerMonitor
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitorinitialClientOffset: Point | null
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitorinitialSourceClientOffset: Point | null
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitorclientOffset: Point | null
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitordifferenceFromInitialOffset: Point | null
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitorsourceClientOffset: Point | null
参考:http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
DropZone
当前组件辅助于拖拽时鼠标指针样式不变为 none
,提升交互效果,通常紧跟 Provider
以前使用,例如:
<PageDesignCore.Provider>
<div>
...
</div>
</PageDesignCore.Provider>
getEmptyImage
返回一个透明图片作为占位元素
useModel hook
获取数据模型对象
contains
Model Apis
model 类主要用于操作项目列表
getChildren(id: any) => Item[]
获取指定 id 的子项目列表
getItem(id: any) => Item | undefined
获取指定 id 的项目对象
isDragging(id?: any) => boolean
如果 id 不传代表检测当前是否处于拖拽中,如果传 id 则返回当前组件是否处于拖拽中
getDraggingItem(id: any) => Item | null
返回处于拖拽中的项目对象
removeItem(id: any) => void;
移除指定 id 的项目对象
addItem(item:Item, pid: any) => void;
添加项目
addItems(items: Item[], pid: any) => void;
批量添加项目
这里只列举了可能常用的 api,其他高级 api 建议自行处理。
;; ;;;;; ;; ;;;
Types
;;;; ; ; ; ; ;