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|