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…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
针对药品仓库的效期管理问题,如何利用WMS系统“破局”
案例: 某医药分销企业,主要经营各类药品的批发与零售。由于药品的特殊性,效期管理至关重要,但该企业一直面临效期问题的困扰。在未使用WMS系统之前,其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...
flow_controllers
关键点: 流控制器类型: 同步(Sync):发布操作会阻塞,直到数据被确认发送。异步(Async):发布操作非阻塞,数据发送由后台线程处理。纯同步(PureSync…...
