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解决
项目中需求,要求给商品图片添加促销标签,并且可拉伸大小,和拖拽位置 最后选择用react-rnd来实现 话不多说,直接上代码!!! 1.在项目根目录下执行以下代码,引入react-rnd yarn add r…...
【C++基础】什么是C++?
本文收录于 《C编程入门》专栏,从零基础开始,介绍C编程入门相关的内容,欢迎关注,谢谢! 文章目录 一、前言二、发展简史三、主要特性四、应用场景五、第一个C程序六、总结 一、前言 为了让初学者快速的了解C语言&#…...
3 算法1-3 火星人
题目描述 一个火星人用一个人类的手演示了如何用手指计数。如果把五根手指――拇指、食指、中指、无名指和小指分别编号为 1,2,3,4 和 5,当它们按正常顺序排列时,形成了 5 位数 12345,当你交换无名指和小指的位置时,会形成 5 位数…...
【原创工具】同文件夹PDF文件合并 By怜渠客
【原创工具】同文件夹PDF文件合并 By怜渠客 原贴:可批量合并多个文件夹内的pdf工具 - 吾爱破解 - 52pojie.cn 他这个存在一些问题,并非是软件内自主实现的PDF合并,而是调用的pdftk这一工具,但楼主并没有提供pdftk,而…...
数据结构-直接插入和希尔排序
这次,我们来讲数据结构的排序的直接插入。 一:排序的思想:把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中,直到所有的记录插入完为止,得到一个新的有序序列 相当于,我们打牌如上图…...
vue3表单验证的时候访问接口如果有值就通过否则不通过.主动去触发校验
页面有个身份证号码的校验。校验完身份证格式是否符合之后还要去访问接口查询这个用户是否存在。如果存在才通过验证。否则就校验不通过 <el-form ref"ruleFormRef" :model"form" label-width"140px" label-position"right" label…...
Trae根据原型设计稿生成微信小程序密码输入框的踩坑记录
一、需求描述 最近经常使用Trae生成一些小组件和功能代码(对Trae赶兴趣的可以看之前的文章《TraeAi上手体验》),刚好在用uniapp开发微信小程序时需要开发一个输入密码的弹框组件,于是想用Trae来实现。原型设计稿如下:…...
【数据结构】 最大最小堆实现优先队列 python
堆的定义 堆(Heap)是一种特殊的完全二叉树结构,通常分为最大堆和最小堆两种类型。 在最大堆中,父节点的值总是大于或等于其子节点的值; 而在最小堆中,父节点的值总是小于或等于其子节点的值。 堆常用于实…...
基于多层感知机(MLP)实现MNIST手写体识别
实现步骤 下载数据集处理好数据集确定好模型(初始化模型参数等等)确定优化函数(损失函数也称为目标函数)和优化方法(一般选用随机梯度下降 SDG )进行模型的训练进行模型的评估 import torch import torch…...
QT和有道词典有冲突,导致内存溢出,闪退。
提示:本文为学习记录,若有疑问,请联系作者。 前言 具体详细查看此博主:原文链接 在使用Qt Designer时,如果开启了有道词典,会导致Qt Designer崩溃。估计应该是把有道词典屏幕取词功能打开后,有…...
4. 示例:创建带约束的随机地址生成器(范围0x1000-0xFFFF)
文章目录 前言代码示例:运行方法:查看结果:关键功能说明:扩展功能建议: 前言 以下是一个完整的SystemVerilog测试平台示例,包含约束随机地址生成、日志输出和波形生成功能: 代码示例࿱…...
VSCode轻松调试运行C#控制台程序
1.背景 我一直都是用VS来开发C#项目的,用的比较顺手,也习惯了。看其他技术文章有介绍VS Code更轻量,更方便。所以我专门花时间来使用VS Code,看看它是如何调试代码、如何运行C#控制台。这篇文章是一个记录的过程。 2.操作 2.1 V…...
内容中台是什么?内容管理平台解析
内容中台的核心价值 现代企业数字化转型进程中,内容中台作为中枢系统,通过构建统一化的内容管理平台实现数据资产的高效整合与智能调度。其核心价值体现在打破传统信息孤岛,将分散于CRM、ERP等系统的文档、知识库、产品资料进行标准化归集&a…...
sqlmap:自动SQL注入和数据库接管工具
SQL 注入攻击是 Web 安全领域最常见的漏洞之一,今天给大家介绍一个自动化 SQL 注入和数据库接管工具:sqlmap。sqlmap 作为一款开源渗透测试工具,能帮助安全测试人员快速发现并利用 SQL 注入漏洞接管数据库服务器。 功能特性 sqlmap 使用 Pyt…...
Python设置阿里云镜像源教程:解决PIP安装依赖包下载速度慢的问题
在 Python 中,你可以通过修改 pip 的配置文件来设置阿里云镜像源,以加速包的安装。以下是具体步骤: 1. 临时使用阿里云镜像源 你可以在使用 pip 安装包时,通过 -i 参数临时指定阿里云镜像源: pip install <packa…...
基于专利合作地址匹配的数据构建区域协同矩阵
文章目录 地区地址提取完成的处理代码 在专利合作申请表中,有多家公司合作申请。在专利权人地址中, 有多个公司的地址信息。故想利用这里多个地址。想用这里的地址来代表区域之间的专利合作情况代表区域之间的协同、协作情况。 下图是专利合作表的一部分…...
Java集合List快速实现重复判断的10种方法深度解析
文章目录 引言:为什么需要关注List重复判断?一、基础实现方法1.1 暴力双循环法1.2 HashSet法 二、进阶实现方案2.1 Stream API实现2.2 TreeSet排序法 三、高性能优化方案3.1 并行流处理3.2 BitSet位图法(仅限整数) 四、第三方库实…...
List的模拟实现(2)
前言 上一节我们讲解了list的基本功能,那么本节我们就结合底层代码来分析list是怎么实现的,那么废话不多说,我们正式进入今天的学习:) List的底层结构 我们先来看一下list的底层基本结构: 这里比较奇怪的…...
如何使用SaltStack批量替换SSL证书方案
以下是借助 SaltStack 批量替换 SSL 证书的完整方案,该方案结合了自动化更新与回滚机制,以保障操作的高效性与安全性: 一、准备工作 目录结构搭建 在 Salt Master 的 /home/salt/ssl_update 目录下构建如下结构:ssl_update/ ├──…...
Golang快速上手01/Golang基础
最近有需求,需要使用go,这几天快速过一遍基础语法,这是今天的总结 项目结构 #mermaid-svg-qpF09pnIik9bqQ4E {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-qpF09pnIik9bqQ4E .e…...
基于ATmega2560与ISD1700的智能语音时钟:硬件选型、软件架构与避坑指南
1. 项目概述与核心价值去年折腾那个用ATMega328驱动三块显示屏的时钟时,我主要精力都花在了如何在320x240的TFT屏幕上把时间、日期和图标画得又准又好看上。项目在《Elektor》杂志上发表后,一位热心的读者给我提了个新想法:能不能做个会“说话…...
关联规则挖掘在Calabi-Yau流形Hodge数分析中的应用与复现
1. 项目概述:当数据挖掘遇见高维几何在理论物理和代数几何的交叉领域,Calabi-Yau流形一直扮演着核心角色。这些具有特殊拓扑结构的空间,不仅是弦理论中额外维度紧化的关键候选者,其本身丰富的数学性质也吸引着无数研究者。然而&am…...
阿波罗登月,不可能:读心术与影子叙事 ——不是向全世界展示登月,而是向全世界注射登月
阿波罗登月,不可能:读心术与影子叙事 ——不是向全世界展示登月,而是向全世界注射登月 Jianbing Zhu 1^{1}1 1^{1}1 ECT-OS-JiuHuaShan 文明实验室 ORCID: 0009-0006-8591-1891 DOI: 10.5281/zenodo.20373157 Email: ect-os-jiuhuashanzoho…...
交流电机驱动器的三种控制模式:前沿切相、后沿切相与同步模式详解
1. 项目概述:一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里,驱动一个交流电机听起来简单,但想让它听话地变速、正反转,甚至实现软启动和精确同步,往往就得搬出笨重又昂贵的工业变频器。今天分享…...
如何用Python脚本榨干百度网盘带宽:pan-baidu-download终极指南
如何用Python脚本榨干百度网盘带宽:pan-baidu-download终极指南 【免费下载链接】pan-baidu-download 百度网盘下载脚本 项目地址: https://gitcode.com/gh_mirrors/pa/pan-baidu-download 在数字时代,百度网盘已成为我们存储和分享大型文件的默认…...
在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 在模型广场灵活选型让我找到了更适合代码生成的Taotoken模型 开发代码辅助工具时,选择合适的模型是平衡效果与成本的关…...
GEO优化可以覆盖哪些搜索平台
这是一个非常现实的问题。企业投放资源做GEO,当然希望覆盖面越广越好。那么GEO优化到底能覆盖哪些平台?覆盖到什么程度?不同平台的GEO逻辑有什么差异?GEO平台覆盖的三个层级第一层级:通用大模型AI平台(核心…...
【DeepSeek漏洞扫描辅助实战指南】:20年安全专家亲授3大避坑法则与5步提效流程
更多请点击: https://intelliparadigm.com 第一章:DeepSeek漏洞扫描辅助的核心价值与适用边界 DeepSeek漏洞扫描辅助并非通用型渗透测试引擎,而是一个聚焦于大语言模型(LLM)应用层安全的轻量级分析工具。其核心价值在…...
3分钟上手:NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器
3分钟上手:NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否曾经想要修改Minecraf…...
绝了!原来毕业论文还能这样写?2026降AIGC工具推荐合集
还在为查重率爆红、AI痕迹太明显、格式乱成一团而发愁?2026 年的 AI 论文工具早已不只是写文章那么简单,从选题构思到降AIGC率、去AI痕迹、查重优化,全流程智能辅助,帮你把论文写作变得简单高效,告别熬夜改稿的焦虑&am…...
