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|