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