(含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现

原生写法

// 封装组件
import React, { useState, useRef } from 'react';const DraggableModal = ({ children }) => {const [position, setPosition] = useState({ x: 0, y: 0 });const modalRef = useRef(null);const handleMouseDown = (e) => {const modal = modalRef.current;const startX = e.clientX - modal.offsetLeft;const startY = e.clientY - modal.offsetTop;const handleMouseMove = (e) => {setPosition({x: e.clientX - startX,y: e.clientY - startY});};const handleMouseUp = () => {document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);};document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);};return (<divref={modalRef}style={{ position: 'absolute', left: position.x, top: position.y }}><div style={{ cursor: 'move' }} onMouseDown={handleMouseDown}>Drag Me</div>{children}</div>);
};export default DraggableModal;// 使用
<DraggableModal><ModalContent />
</DraggableModal>

使用库并处理拖动和点击事件重叠问题

// 使用库实现功能
你可以使用react-draggable库来实现这个功能。首先安装react-draggable库:```
npm install react-draggable
```然后在你的组件中引入react-draggable库,并使用它来包裹你想要添加可拖动功能的按钮:```jsx
import React from 'react';
import Draggable from 'react-draggable';const DraggableButton = () => {let isDragging = false;const handleDrag = () => {isDragging = true;};const handleStop = () => {console.log('handleStop');// 触发 onStop 后会触发 onClick,加个 setTimeout 是为了让修改不“马上”发生,导致 handleClick 拿到的不是预期的结果setTimeout(() => (isDragging = false), 0);};const handleClick = () => {console.log('handleClick');if (isDragging) {return;}console.log('啊,我被 click 了');};return (<Draggable onDrag={handleDrag} onStop={handleStop}><button onClick={handleClick} style={{ position: 'fixed', bottom: 0, right: 0 }}>可拖动按钮</button></Draggable>);
}export default DraggableButton;

解决库和Antd Tooltip配置使用无法拖动

可以尝试使用`react-draggable`的`handle`属性来指定拖动的句柄,避免事件冲突。
示例代码如下:<Draggable handle=".drag-handle"><div><Button className="drag-handle">Hover me<Tooltip title="Tooltip text"><QuestionCircleOutlined /></Tooltip></Button></div>
</Draggable>

移动端或PC端如何判断react-draggable包裹的组件时点击还是移动(含移动位置判断),用reack hook代码实现

// 判断是否点击还是移动import React, { useState } from 'react';
import Draggable from 'react-draggable';const DraggableComponent = () => {const [isDragging, setIsDragging] = useState(false);const handleTouchStart = (e) => {setIsDragging(false);};const handleTouchMove = (e) => {setIsDragging(true);};const handleTouchStop = () => {if (!isDragging) {// 没在拖动}settimeout(() => {setIsDragging(false)}, 0)}return (<DraggableonStart={handleTouchStart}onDrag={handleTouchMove}onStop={handleTouchStop}><div style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>Drag me</div></Draggable>);
};export default DraggableComponent;// 下方是判断移动位置import React, { useState } from 'react';
import Draggable from 'react-draggable';const DraggableComponent = () => {const [isDragging, setIsDragging] = useState(false);const [startX, setStartX] = useState(null);const [startY, setStartY] = useState(null);const handleTouchStart = (e) => {setStartX(e.touches[0].clientX);setStartY(e.touches[0].clientY);setIsDragging(false);};const handleTouchMove = (e) => {const moveX = e.touches[0].clientX;const moveY = e.touches[0].clientY;if (Math.abs(moveX - startX) > 5 || Math.abs(moveY - startY) > 5) {setIsDragging(true);}};const handleTouchStop = () => {setIsDragging(false)}return (<DraggableonStart={handleTouchStart}onDrag={handleTouchMove}onStop={handleTouchStop}><div style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>Drag me</div></Draggable>);
};export default DraggableComponent;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/778753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

五种免费的Python开发环境及具体下载网址

五种免费的Python开发环境及具体下载网址 目录 五种免费的Python开发环境及具体下载网址1.Anaconda2.PyCharm Community Edition3.Visual Studio Code4.Jupyter Notebook5. WinPython Python编程可选择不同的开发工具环境进行&#xff0c;本文介绍五种常用的&#xff0c;读者可…

adb基本命令

下载安装 adb 概述: ADB 全称为 Android Debug Bridge&#xff0c;起到调试桥的作用&#xff0c;是一个客户端-服务器端程序。其中客户端是用来操作的电脑&#xff0c;服务端是 Android 设备。 下载地址: Windows版本&#xff1a;https://dl.google.com/android/repository/pl…

vue前端工程化

前言 本文介绍的是有关于vue方面的前端工程化实践&#xff0c;主要通过实践操作让开发人员更好的理解整个前端工程化的流程。 本文通过开发准备阶段、开发阶段和开发完成三个阶段开介绍vue前端工程化的整体过程。 准备阶段 准备阶段我将其分为&#xff1a;框架选择、规范制…

vue做移动端自适应插件实现rem

1.实现方式 postcss-pxtorem&#xff1a;将px转换为rem amfe-flexible&#xff1a;为html、body提那家font-size&#xff0c;窗口调整的时候重新设置font-size 2.安装与使用 npm install amfe-flexible --save npm install postcss-pxtorem --save-dev 1.再main.js入口文件…

FOC,即Field-Oriented Control

FOC&#xff0c;即Field-Oriented Control&#xff0c;也被称为磁场导向控制或矢量控制&#xff0c;是一种利用变频器&#xff08;VFD&#xff09;来控制三相电机的技术。以下是对FOC的详细介绍&#xff0c;涵盖了其基本概念、控制原理、应用领域以及优缺点等方面的内容。 一、…

算法——图论:路径,回溯

. - 力扣&#xff08;LeetCode&#xff09; 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特定顺序&#xff09; graph[i] 是一个从节点 i 可以访问的所有节点的列表&#xff0…

GEE训练——如何实现单景影像边界的提取以sentinel和Landsat数据为例(栅格转矢量)

本教程的主要目的是如何实现单景影像边界的提取以sentinel和Landsat数据为例,很多人是项通过GEE来实现单景影像的获取过程,所以这里最重要的就是首先根据点确定影像的范围,或者根据指定的单景影像的编号来获取指定的单景影像,然后将其矢量化即可。 简介 在Google Earth E…

mysql8.x在windows server2019安装并设置主从同步难点问题

1.MySQL服务无法启动并提示“MySQL8.x本地计算机上的MySQL服务启动后停止” 1&#xff09;用notepad打开my.ini文件&#xff0c;重新保存为ansi编码格式。 2&#xff09;右键windows图标&#xff0c;点击“计算机管理”&#xff0c;点击“本地用户和组”&#xff0c;双击“组…

JSP技术及其应用

目录 一、JSP 指令元素 1. page指令 二、JSP 注释 1. HTML注释&#xff1a; 2. Java注释&#xff1a; 3. JSP注释&#xff1a; 三、页面编码格式 1. pageEncoding&#xff1a; 2. contentType&#xff1a; 一、JSP 指令元素 JSP包含三种主要的指令元素&#xff1a;pag…

SQL-CRUD-2数据库实验

目录 第一关任务描述 相关知识 插入完整内容的行 插入选定内容的行 编程要求 测试说明 第一关代码 第二关任务描述 相关知识 删除表中的指定行 删除表中的所有行 编程要求 测试说明 第二关代码 第三关任务描述 相关知识 更新表中的指定行 编程要求 测试说明…

【Pytorch入门】小土堆PyTorch入门教程完整学习笔记(详细笔记并附练习代码 ipynb文件)

小土堆PyTorch入门教程笔记 最近在观看PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】顺便做点笔记&#xff0c;方便回看&#xff0c;同时也希望记录的笔记能够帮助到更多在入门的小伙伴~ 【注】仅记录个人觉得重要的知识&#xff0c…

cas学习2:idea里搭建cas项目

在上篇中介绍了cas服务在tomcat中怎么启动的及某j集成cas&#xff0c;这篇讲下idea怎么集成cas成一个项目&#xff0c;为后续的定制自己的项目做好铺垫。 1.下载CAS 模板 Overlay Template&#xff0c;我这里使用 Apereo CAS 5.3 版本&#xff0c;JDK需要1.8 地址&#xff1a…

JavaWeb后端——HTTP协议/Tomcat

HTTP HTTP协议&#xff1a;无状态&#xff0c;对事务处理没有记忆能力。每次请求-响应都是独立的。后一次请求不会记录前一次请求数据。缺点&#xff1a;多次请求之间不能共享数据&#xff0c;优点&#xff1a;速度快。 HTTP协议请求报文&#xff1a; HTTP协议响应报文&#x…

分布式算法 - 雪花算法

雪花算法是一种用于生成全局唯一ID的分布式算法&#xff0c;用于解决分布式系统中生成唯一ID的需求。 雪花算法的核心思想是将生成的ID分为不同的部分&#xff0c;每个部分代表不同的含义。通常情况下&#xff0c;一个雪花 ID由3个部分组成&#xff1a; 时间戳&#xff1a;时…

JVM篇详细分析

JVM总体图 程序计数器&#xff1a; 线程私有的&#xff0c;每个线程一份&#xff0c;内部保存字节码的行号&#xff0c;用于记录正在执行字节码指令的地址。&#xff08;可通过javap -v XX.class命令查看&#xff09; java堆&#xff1a; 线程共享的区域&#xff0c;用来保存对…

Java中的基本数据与运算(关键字、标识符、运算符)

目录 一、关键字 二、标识符 三、注释 四、变量 五、数据类型 六、运算符 6.1 算术运算符 6.2 比较运算符 6.3 逻辑运算符 6.4 位移运算符 一、关键字 在 Java 中内置了很多有特殊意义的单词&#xff0c;这些单词不能做为类名、方法名、变量名来使用。关键字必须是小…

Calendar日历类

Calendar 类是一个抽象类&#xff0c;为我们提供了关于日期计算的功能&#xff0c;比如&#xff1a;年、月、日、时、分、秒的展示和计算。 GregorianCalendar 是Canlendar 的子类&#xff0c;表示公历。 注&#xff1a;月份的表示&#xff0c;一月是0&#xff0c;二月是1&am…

【echart】数据可视化+vue+vite遇到问题

1、vue3使用echars图表报错&#xff1a;"Initialize failed:invalid dom" 原因是因为&#xff1a;Dom没有完成加载时&#xff0c;echarts.init() 就已经开始执行了&#xff0c;获取不到Dom&#xff0c;无法进行操作 解决&#xff1a;加个延时 onMounted(async () …

Elasticsearch相关问题

相关问题&#xff1a; 1、Elasticsearch.Net和NEST的区别&#xff1f; Elasticsearch 官方为 .NET 提供了 2 个官方客户端库&#xff1a;Elasticsearch.Net 和 NEST。 Elasticsearch.Net 和 NEST对比说明&#xff1a; 可以简单理解为 Elasticsearch.Net 是 NEST的一个子集。N…

MATLAB:优化与规划问题

一、线性规划 % 线性规划&#xff08;Linear programming, 简称LP&#xff09; fcoff -[75 120 90 105]; % 目标函数系数向量 A [9 4 7 54 5 6 105 10 8 53 8 9 77 6 4 8]; % 约束不等式系数矩阵 b [3600 2900 3000 2800 2200]; % 约束不等式右端向量 Aeq []; % 约束等式系…