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

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

项目中需求,要求给商品图片添加促销标签,并且可拉伸大小,和拖拽位置
最后选择用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; // 组件停止拖拽时调用

相关文章:

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

项目中需求&#xff0c;要求给商品图片添加促销标签&#xff0c;并且可拉伸大小&#xff0c;和拖拽位置 最后选择用react-rnd来实现 话不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; 1.在项目根目录下执行以下代码&#xff0c;引入react-rnd yarn add r…...

【C++基础】什么是C++?

本文收录于 《C编程入门》专栏&#xff0c;从零基础开始&#xff0c;介绍C编程入门相关的内容&#xff0c;欢迎关注&#xff0c;谢谢&#xff01; 文章目录 一、前言二、发展简史三、主要特性四、应用场景五、第一个C程序六、总结 一、前言 为了让初学者快速的了解C语言&#…...

3 算法1-3 火星人

题目描述 一个火星人用一个人类的手演示了如何用手指计数。如果把五根手指――拇指、食指、中指、无名指和小指分别编号为 1,2,3,4 和 5&#xff0c;当它们按正常顺序排列时&#xff0c;形成了 5 位数 12345&#xff0c;当你交换无名指和小指的位置时&#xff0c;会形成 5 位数…...

【原创工具】同文件夹PDF文件合并 By怜渠客

【原创工具】同文件夹PDF文件合并 By怜渠客 原贴&#xff1a;可批量合并多个文件夹内的pdf工具 - 吾爱破解 - 52pojie.cn 他这个存在一些问题&#xff0c;并非是软件内自主实现的PDF合并&#xff0c;而是调用的pdftk这一工具&#xff0c;但楼主并没有提供pdftk&#xff0c;而…...

数据结构-直接插入和希尔排序

这次&#xff0c;我们来讲数据结构的排序的直接插入。 一&#xff1a;排序的思想&#xff1a;把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新的有序序列 相当于&#xff0c;我们打牌如上图…...

vue3表单验证的时候访问接口如果有值就通过否则不通过.主动去触发校验

页面有个身份证号码的校验。校验完身份证格式是否符合之后还要去访问接口查询这个用户是否存在。如果存在才通过验证。否则就校验不通过 <el-form ref"ruleFormRef" :model"form" label-width"140px" label-position"right" label…...

Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录

一、需求描述 最近经常使用Trae生成一些小组件和功能代码&#xff08;对Trae赶兴趣的可以看之前的文章《TraeAi上手体验》&#xff09;&#xff0c;刚好在用uniapp开发微信小程序时需要开发一个输入密码的弹框组件&#xff0c;于是想用Trae来实现。原型设计稿如下&#xff1a;…...

【数据结构】 最大最小堆实现优先队列 python

堆的定义 堆&#xff08;Heap&#xff09;是一种特殊的完全二叉树结构&#xff0c;通常分为最大堆和最小堆两种类型。 在最大堆中&#xff0c;父节点的值总是大于或等于其子节点的值&#xff1b; 而在最小堆中&#xff0c;父节点的值总是小于或等于其子节点的值。 堆常用于实…...

基于多层感知机(MLP)实现MNIST手写体识别

实现步骤 下载数据集处理好数据集确定好模型&#xff08;初始化模型参数等等&#xff09;确定优化函数&#xff08;损失函数也称为目标函数&#xff09;和优化方法&#xff08;一般选用随机梯度下降 SDG &#xff09;进行模型的训练进行模型的评估 import torch import torch…...

QT和有道词典有冲突,导致内存溢出,闪退。

提示&#xff1a;本文为学习记录&#xff0c;若有疑问&#xff0c;请联系作者。 前言 具体详细查看此博主&#xff1a;原文链接 在使用Qt Designer时&#xff0c;如果开启了有道词典&#xff0c;会导致Qt Designer崩溃。估计应该是把有道词典屏幕取词功能打开后&#xff0c;有…...

4. 示例:创建带约束的随机地址生成器(范围0x1000-0xFFFF)

文章目录 前言代码示例&#xff1a;运行方法&#xff1a;查看结果&#xff1a;关键功能说明&#xff1a;扩展功能建议&#xff1a; 前言 以下是一个完整的SystemVerilog测试平台示例&#xff0c;包含约束随机地址生成、日志输出和波形生成功能&#xff1a; 代码示例&#xff1…...

VSCode轻松调试运行C#控制台程序

1.背景 我一直都是用VS来开发C#项目的&#xff0c;用的比较顺手&#xff0c;也习惯了。看其他技术文章有介绍VS Code更轻量&#xff0c;更方便。所以我专门花时间来使用VS Code&#xff0c;看看它是如何调试代码、如何运行C#控制台。这篇文章是一个记录的过程。 2.操作 2.1 V…...

内容中台是什么?内容管理平台解析

内容中台的核心价值 现代企业数字化转型进程中&#xff0c;内容中台作为中枢系统&#xff0c;通过构建统一化的内容管理平台实现数据资产的高效整合与智能调度。其核心价值体现在打破传统信息孤岛&#xff0c;将分散于CRM、ERP等系统的文档、知识库、产品资料进行标准化归集&a…...

sqlmap:自动SQL注入和数据库接管工具

SQL 注入攻击是 Web 安全领域最常见的漏洞之一&#xff0c;今天给大家介绍一个自动化 SQL 注入和数据库接管工具&#xff1a;sqlmap。sqlmap 作为一款开源渗透测试工具&#xff0c;能帮助安全测试人员快速发现并利用 SQL 注入漏洞接管数据库服务器。 功能特性 sqlmap 使用 Pyt…...

Python设置阿里云镜像源教程:解决PIP安装依赖包下载速度慢的问题

在 Python 中&#xff0c;你可以通过修改 pip 的配置文件来设置阿里云镜像源&#xff0c;以加速包的安装。以下是具体步骤&#xff1a; 1. 临时使用阿里云镜像源 你可以在使用 pip 安装包时&#xff0c;通过 -i 参数临时指定阿里云镜像源&#xff1a; pip install <packa…...

基于专利合作地址匹配的数据构建区域协同矩阵

文章目录 地区地址提取完成的处理代码 在专利合作申请表中&#xff0c;有多家公司合作申请。在专利权人地址中&#xff0c; 有多个公司的地址信息。故想利用这里多个地址。想用这里的地址来代表区域之间的专利合作情况代表区域之间的协同、协作情况。 下图是专利合作表的一部分…...

Java集合List快速实现重复判断的10种方法深度解析

文章目录 引言&#xff1a;为什么需要关注List重复判断&#xff1f;一、基础实现方法1.1 暴力双循环法1.2 HashSet法 二、进阶实现方案2.1 Stream API实现2.2 TreeSet排序法 三、高性能优化方案3.1 并行流处理3.2 BitSet位图法&#xff08;仅限整数&#xff09; 四、第三方库实…...

List的模拟实现(2)

前言 上一节我们讲解了list的基本功能&#xff0c;那么本节我们就结合底层代码来分析list是怎么实现的&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习&#xff1a;&#xff09; List的底层结构 我们先来看一下list的底层基本结构&#xff1a; 这里比较奇怪的…...

如何使用SaltStack批量替换SSL证书方案

以下是借助 SaltStack 批量替换 SSL 证书的完整方案&#xff0c;该方案结合了自动化更新与回滚机制&#xff0c;以保障操作的高效性与安全性&#xff1a; 一、准备工作 目录结构搭建 在 Salt Master 的 /home/salt/ssl_update 目录下构建如下结构&#xff1a;ssl_update/ ├──…...

Golang快速上手01/Golang基础

最近有需求&#xff0c;需要使用go&#xff0c;这几天快速过一遍基础语法&#xff0c;这是今天的总结 项目结构 #mermaid-svg-qpF09pnIik9bqQ4E {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qpF09pnIik9bqQ4E .e…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...