当前位置：首页 > news >正文

react使用拖拽，缩放组件，采用react-rnd解决

news 2025/9/13 13:37:51

项目中需求，要求给商品图片添加促销标签，并且可拉伸大小，和拖拽位置
最后选择用react-rnd来实现
话不多说，直接上代码！！！

1.在项目根目录下执行以下代码，引入react-rnd

yarn add react-rnd

2.在项目中直接引用，以下是最简单的示例

import React, { Component } from 'react';
import { Rnd } from 'react-rnd';interface State {/*** 正在操作中*/isDragging: boolean;/*** 拉伸大小*/size: {width: number;height: number;};/*** 位置*/position: {x: number;y: number;};
}
export class ProductMainImageWatermarkRulePreview extends Component<unknown, State> {constructor(props: any) {super(props);this.state = {isDragging: false,size: {width: 100,height: 100,},position: {x: 0,y: 0,},};}handleDragStart = () => {this.setState({isDragging: true,});};handleDragStop = (e: any, d: any) => {this.setState({isDragging: false,position: {x: d.x,y: d.y,},});};handleResizeStart = () => {this.setState({isDragging: true,});};handleResizeStop = (e: any, direction: any, ref: any, delta: any, position: any) => {this.setState({isDragging: false,size: {width: ref.style.width,height: ref.style.height,},position: position,});};render() {const { position, isDragging, size } = this.state;return (<div style={{ width: 375, height: 375, backgroundColor: 'gray' }}><Rnd// default={{ x: position.x, y: position.y, width: size.width, height: size.height }}// minHeight={1}// maxHeight={375}// minWidth={1}// maxWidth={375}size={size}position={position}bounds="parent"onDragStart={this.handleDragStart}onDragStop={this.handleDragStop}onResizeStart={this.handleResizeStart}onResizeStop={this.handleResizeStop}resizeParentMore={true} // 如果需要阻止父容器跟随大小变化，可以设置为falseenableResizing={{top: true,right: true,bottom: true,left: true,topRight: true,bottomRight: true,bottomLeft: true,topLeft: true,}}resizeHandles={['se', 'sw', 'ne', 'nw']}style={{ opacity: isDragging ? 0.8 : 1 }}onClick={(e: any) => e.stopPropagation()}><div><imgsrc="https://b-puzhehei-cdn.co-mall.net/global/magic-backend/invitation-activity/button-picture.png"alt=""style={{ width: '100%', height: '100%' }}/></div></Rnd></div>);}
}

实现效果如下
在这里插入图片描述

还有一些属性，罗列出来，希望对大家有帮助～

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   用以设置是否可调整大小，可从组件各个方向上或整体来设置：
disableDragging?: boolean;     是否禁用拖拽
dragAxis?: 'x' | 'y' | 'both' | 'none'    设置组件的拖拽方向
bounds?: string;    组件的边界：可设置为父组件的名称或者window、body或者一个选择器的名称(需要带上符号. or #)

方法

onResizeStart?: RndResizeStartCallback; // 开始调整大小时调用onResize?: RndResizeCallback; // 组件调整大小时调用onResizeStop?: RndResizeCallback; // 组件停止调整大小时调用onDragStart: DraggableEventHandler; // 组件开始拖拽时调用onDrag: DraggableEventHandler; // 组件拖拽时调用onDragStop: DraggableEventHandler; // 组件停止拖拽时调用