当前位置: 首页 > 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…...

《我看见的世界:李飞飞自传》第1-6章阅读笔记:从移民少女到AI教母的“看见“之旅

前言 当我们谈论人工智能时&#xff0c;我们谈论的是算法、数据、算力&#xff0c;是那些冰冷的代码和复杂的模型。但在《我看见的世界&#xff1a;李飞飞自传》中&#xff0c;李飞飞用她独特的视角告诉我们&#xff1a;AI的本质&#xff0c;是人类对"看见"世界的渴望…...

股票买卖最佳时机:LeetCode121题解

题目LeetCode121给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。返回你可以从这笔交易中获取…...

收藏干货|2026 版企业 AI 落地实操指南,程序员小白入门避坑必备

如今人工智能早已脱离概念炒作阶段&#xff0c;全面扎根企业实际业务场景&#xff0c;成为技术从业者与企业管理者无法回避的发展课题。各行各业都加速布局AI赛道&#xff0c;行业心态也从初期观望试探&#xff0c;彻底转变为实打实的落地攻坚。 不少企业高层主动牵头统筹AI规划…...

ZTE光猫工厂模式解锁:5分钟开启隐藏功能的终极指南

ZTE光猫工厂模式解锁&#xff1a;5分钟开启隐藏功能的终极指南 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 核心关键词&#xff1a;ZTE光猫工厂模式解锁 长尾关键词&#xff1a; ZT…...

氘可来昔替尼常见副作用为鼻咽炎头痛及腹泻,如何应对

任何口服药物的临床价值&#xff0c;都必须在疗效与安全性的天平上找到精准的平衡点。氘可来昔替尼以PASI 75应答率的全面胜出证明了自己在银屑病治疗中的卓越地位&#xff0c;而其不良反应谱同样经过了严苛的临床验证。鼻咽炎、头痛和腹泻构成了这款药物最需关注的三大安全信号…...

Log4Shell漏洞深度解析:Spring Boot日志注入原理与四层修复方案

1. 这个漏洞不是“远程执行代码”那么简单——它是一次对Java生态信任链的系统性击穿Log4j CVE-2021-44228&#xff0c;业内常简称为“Log4Shell”&#xff0c;2021年12月爆发时&#xff0c;我正在给一家金融客户的Spring Boot微服务集群做灰度发布前的安全加固。凌晨三点收到告…...

机器学习的最佳实践:这7个原则让你的模型更稳定

对于软件测试从业者而言&#xff0c;机器学习技术正在快速融入测试流程&#xff1a;从自动化测试用例生成、缺陷预测到测试环境异常检测&#xff0c;机器学习模型的稳定性直接决定了测试结果的可靠性——如果模型在测试环境波动、输入数据变化时性能骤降&#xff0c;不仅无法提…...

DLA功耗优化验证:tegrastats实战指南

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

昇腾NPU模型服务化——从离线模型到高可用推理服务

模型训练完只是第一步。真正产生业务价值的是把模型部署成724小时在线服务——毫秒级延迟、支持动态Batching、能扛住流量洪峰&#xff0c;且具备高可用性。 这篇将手把手教你基于昇腾NPU构建生产级模型推理服务&#xff0c;涵盖框架选型、服务化架构、动态Batching优化、热加载…...

UE5 Cesium项目里,如何把默认的飞行Pawn换成建筑漫游Pawn?保姆级迁移教程

UE5 Cesium项目建筑漫游Pawn迁移实战&#xff1a;从飞行模式到精细化浏览的完整指南当你在UE5中结合Cesium插件构建数字孪生场景时&#xff0c;DynamicPawn提供的全球飞行体验令人印象深刻。但当视角聚焦到单体建筑或室内空间时&#xff0c;那种仿佛操控无人机般的操作方式就显…...