1.0.0 • Published 6 years ago
props-dragger v1.0.0
Props dragger
这是一款使用 render props
写成的拖拽组件,使得获取组件状态格外简单
安装
npm install @props/dragger
最简单的例子
import React from 'react';
import ReactDOM from 'react-dom';
import Dragger from '@props/dragger';
const Demo = () => {
return (
<Dragger>
{({ style, handle }) => (
<div className={name} style={{ ...style }} {...handle()}>
普通的拖拽组件
</div>
)}
</Dragger>
);
};
ReactDOM.render(<Demo />, document.getElementById('root'));
API 和 Props
API 描述
名字 | 描述 | 类型 | 是否需要 | 默认值 |
---|---|---|---|---|
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 |
hasCancelHandle | 内部取消的区域 点击我拖动 | bool | false | undefined |
isUserMove | 是否由用户移动 可能是通过外部props改变 | bool | false | true |
static | 是否静态 设置了就不可移动 | bool | false | undefined |
onDragStart | 开始拖拽 | func | false | undefined |
onDragMove | 正在拖拽 | func | false | undefined |
onDragEnd | 结束拖拽,鼠标弹开 | func | false | undefined |
1.0.0
6 years ago