React可拖拽缩放组件react-rnd

react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。

一、安装

使用 npm

npm i -S react-rnd

使用 yarn

yarn add react-rnd

二、使用方法

基本用法

<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Rnd
</Rnd>

使用position和size的例子

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.y }}
  onDragStop={(e, d) => { this.setState({ x: d.x, y: d.y }) }}
  onResizeStop={(e, direction, ref, delta, position) => {
    this.setState({
      width: ref.style.width,
      height: ref.style.height,
      ...position,
    });
  }}
>
  123
</Rnd>

三、属性

default: { x: number; y: number; width?: number | string; height?: number | string; };
设定默认的一些属性，如初始坐标和宽高
size?: { width: (number | string), height: (number | string) };
组件的大小，即宽度与高度
position?: { x: number, y: number };
组件的坐标，即横坐标与纵坐标
resizeGrid?: [number, number];
重置大小时的增量，默认为[1, 1]
dragGrid?: [number, number];
拖拽时的增量，默认为[1, 1]
lockAspectRatio?: boolean | number;
锁定纵横比，可设置为布尔值或数字值，当设置为true时，组件会锁定纵横比，并且该值为组件初始宽高的比值；而设置为数字时，组件调整大小时会以该值作为纵横比来调整
enableResizing?: ?Enable;
用以设置是否可调整大小，可从组件各个方向上或整体来设置：

export type Enable = {
  bottom?: boolean;
  bottomLeft?: boolean;
  bottomRight?: boolean;
  left?: boolean;
  right?: boolean;
  top?: boolean;
  topLeft?: boolean;
  topRight?: boolean;
} | boolean

disableDragging?: boolean;
是否禁用拖拽
dragAxis?: 'x' | 'y' | 'both' | 'none'
设置组件的拖拽方向
bounds?: string;
组件的边界：可设置为父组件的名称或者window、body或者一个类选择器的名称

四、回调函数

onResizeStart?: RndResizeStartCallback; // 开始调整大小时调用

export type RndResizeStartCallback = (
  e: SyntheticMouseEvent<HTMLDivElement> | SyntheticTouchEvent<HTMLDivElement>,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
) => void;

onResize?: RndResizeCallback; // 组件调整大小时调用

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;

onResizeStop?: RndResizeCallback; // 组件停止调整大小时调用

export type RndResizeCallback = (
  e: MouseEvent | TouchEvent,
  dir: ResizeDirection,
  refToElement: React.ElementRef<'div'>,
  delta: ResizableDelta,
  position: Position,
) => void;

onDragStart: DraggableEventHandler; // 组件开始拖拽时调用

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

onDrag: DraggableEventHandler; // 组件拖拽时调用

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

onDragStop: DraggableEventHandler; // 组件停止拖拽时调用

type DraggableData = {
  node: HTMLElement,
  x: number,
  y: number,
  deltaX: number, deltaY: number,
  lastX: number, lastY: number
};

type DraggableEventHandler = (
  e: SyntheticMouseEvent | SyntheticTouchEvent, data: DraggableData,
) => void | false;

实例API

updateSize(size: { width: string | number, height: string | number })
用以调整组件的大小
updatePosition({ x: number, y: number }): void
用以调整组件的位置
allowAnyClick?: boolean
如果设置为true，则允许非左键点击拖拽

附：

github地址：https://github.com/bokuweb/react-rnd

如果仅需实现拖拽功能，无需缩放功能，也可使用 react-draggable 组件 https://kalacloud.com/blog/react-draggable-tutorial/