dragger with a render props
这是一款使用
render props写成的拖拽组件,使得获取组件状态格外简单
npm install props-dragger
import React from 'react'; import ReactDOM from 'react-dom'; import Dragger from '@props/dragger';const Demo = () => { return ( {({ style, handle }) => ( <div classname="{name}" style="{{" ...style> 普通的拖拽组件 )} ); };
ReactDOM.render(, document.getElementById('root'));
|名字| 描述|类型|是否需要|默认值|
| ------------- |:-------------:|:-----:| -----:|-----:|
|x|
给予元素一个x,y的初始位置,单位是px
|number|false|undefined|
|y||number|false|undefined|
|grid|
以网格的方式移动,每次移动并不是平滑的移动
[20,30],鼠标x轴方向移动了20 px ,y方向移动了30 px,整个子元素才会移动
|array|false|undefined|
|allowX|只允许移动x轴 |bool|false|true|
|allowY|只允许移动y轴 |bool|false|true|
|isUserMove|
是否由用户移动
可能是通过外部props改变
|bool|false|undefined|
|static|
是否静态
设置了就不可移动
|bool|false|undefined|
|onDragStart|
开始拖拽
|func|false|undefined|
|onDragMove|
正在拖拽
|func|false|undefined|
|onDragEnd|
结束拖拽,鼠标弹开
|func|false|undefined|
|onDragging|
受控函数
|func|false|undefined|