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.使用例子

基本用法

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

实例

 <Rndsize={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 #)