Luy-dragger

by Foveluy

Foveluy / Luy-dragger

dragger with a render props

133 Stars 26 Forks Last release: Not found 48 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 ( {({ style, handle }) => ( <div classname="{name}" style="{{" ...style> 普通的拖拽组件 )} ); };

ReactDOM.render(, document.getElementById('root'));

API 和 Props

API and 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| |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|

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.