react-rnd的使用（react使用拖拽，缩放组件）

看之前可以了解一下拖拽的原理 html5拖放-CSDN博客

（给自己博客打的广告，推广一下，想了解的可以看一下，不想了解的可以忽略）

1.react-rnd 是什么

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

rnd 的意思是：resizable and draggable（可调整大小和可拖动）

2.安装

使用 npm

npm i -S react-rnd

使用 yarn

yarn add react-rnd

3.核心

React RND的核心依赖于React的生命周期方法和CSS Transform属性。它使用了ref来获取DOM元素，然后借助event处理函数监听鼠标事件，实现了拖动和缩放的功能。同时，为了保持组件的响应式，它利用CSS的transform属性而非直接改变元素的宽高，这样可以避免页面的频繁重绘，提高性能。

此外，React RND还支持以下关键特性：

• 边界检测：组件可以限制其拖动或缩放的范围。
• 可配置性：允许自定义拖动和缩放的行为，例如拖动的手柄、是否启用某些行为等。
• 动画：内置平滑过渡效果，提供更好的用户体验。
• 拥抱React Hooks：尽管支持老版本的React，但最新版本已全面采用React Hooks进行重构，更符合现代React的开发模式。

4.使用例子

基本用法

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

实例

 <Rnd
        size={boxSize}
        position={boxPosition}
        dragHandleClassName='selectdSetPosition'
        //开始拖放时调用
        onDragStart={() => setDragging(true)}
        //拖动停止时调用
        onDragStop={(_, d) => handleDragStop(d)}
        // 开始调整大小时调用
        onResizeStart={() => setDragging(true)}
        // 组件停止调整大小时调用
        onResizeStop={(_, direction, ref) => handleResizeStop(direction, ref)}
        //是否可以拉大小
        enableResizing={{
          top: false,
          bottom: true,
          left: true,
          right: true,
        }}
      >
<div></div> 
</Rnd>

5.属性

• 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或者一个选择器的名称(需要带上符号. or #)

6.回调函数

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

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

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

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

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

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