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

news2024/11/15 3:22:21

看之前可以了解一下拖拽的原理 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 #)