1.0.0 • Published 6 years ago

props-dragger v1.0.0

Weekly downloads
4
License
-
Repository
-
Last release
6 years ago

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的初始位置,单位是pxnumberfalseundefined
ynumberfalseundefined
grid 以网格的方式移动,每次移动并不是平滑的移动 20,30,鼠标x轴方向移动了20 px ,y方向移动了30 px,整个子元素才会移动arrayfalseundefined
allowX只允许移动x轴boolfalsetrue
allowY只允许移动y轴boolfalsetrue
hasCancelHandle 内部取消的区域 点击我拖动 boolfalseundefined
isUserMove 是否由用户移动 可能是通过外部props改变boolfalsetrue
static 是否静态 设置了就不可移动boolfalseundefined
onDragStart 开始拖拽funcfalseundefined
onDragMove 正在拖拽funcfalseundefined
onDragEnd 结束拖拽,鼠标弹开funcfalseundefined