Need help with Luy-dragger?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Foveluy
141 Stars 26 Forks 48 Commits 1 Opened issues

Description

dragger with a render props

Services available

!
?

Need anything else?

Contributors list

# 52,142
TypeScr...
C
reactjs
Redux
48 commits

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.