React 模态框的设计（六）Draggable的整合

前一节课中漏了一个知识点，当内容很长时需要滚动，这个滚动条是很影响美观的。在MacOS下的还能忍，win系统下简直不能看。如何让长内容能滚动又不显示滚动条呢，我尝试过很多办法，最终下面这个方法目前来说是最完美的。我们创建一个css文件。

_ModelContent.css

/** 本样式表用于隐藏滚动条但保留滚动功能*//* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
.noscrollbar::-webkit-scrollbar {display: none;
}/* 为 IE、Edge 和 Firefox 隐藏滚动条 */
.noscrollbar {-ms-overflow-style: none;/* IE 和 Edge */scrollbar-width: none;/* Firefox */
}

把它引入 到 ModelContent组件中就好了。目前我测试了Edge、Safari、Chrome三款浏览器，效果不错。其它的没有测试，不知道什么效果，欢迎大家告诉我。

再次升级Draggable组件

关于前面我已经讲过Draggable组件，想让一个组件移动起来不难，想要在弹窗中多状态下的移动有点难度。

动态获取视口的大小参数

_useWindowSize.jsx

import { useState, useEffect } from 'react';/*** 动态获取窗口的宽高* @returns */
export const useWindowSize = () => {const [windowSize, setWindowSize] = useState({width: window.innerWidth,height: window.innerHeight,});useEffect(() => {const updateSize = () => setWindowSize({width: window.innerWidth,height: window.innerHeight,});window.addEventListener('resize', updateSize);return () => window.removeEventListener('resize', updateSize);}, []);return windowSize;
}

当调整浏览器的大小时，我们要实时动态的获取视口的大小，以使我们的弹窗及时做出响应。

弹窗弹出时的主体动画

//弹窗的动画
const attentionKeyframes = keyframes`from,to {transform: scale(1);}50% {transform: scale(1.03);}
`;//弹窗的开始时动画
const anim = css`animation: ${attentionKeyframes} 400ms ease;
`;//弹窗的结束时动画
const stopAnim = css`animation: null;
`;

设置加载后运行动画,

// 弹窗注目动画的监听useEffect(function () {// 弹窗动画监听事件const listener = (e) => {if (e.type === "animationend") {setAttentionStyle(stopAnim);}};if (wrapperRef.current !== null) {wrapperRef.current.addEventListener("animationend", listener, true);}return () => {if (wrapperRef.current !== null) {wrapperRef.current.removeEventListener("animationend", listener);}};}, []);

只运行一次，所以useEffect中没有依赖。

如果transform动画有多个属性动画，而主体的位置又是发生变化的，那么这个属性一定要分割开分别进行动画，原为transform动画是针对原始位置的动画，当主体位移后，动画还在原来的位置动画，这就很尴尬了。所以我们要调整

...
return (<Boxref={wrapperRef}sx={{transform: `translate(${position.x}px, ${position.y}px)`,cursor: canDrag ? isDragging ? "grabbing" : "grab" : "default",transition: isDragging ? null : `transform 200ms ease-in-out`,}}onMouseDown={handleMouseDown}onMouseMove={onMouseMove}onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}><Boxsx={{transform: `${isDragging ? "scale(1.03)" : "scale(1)"}`,transition: `transform 200ms ease-in-out`,}}css={attentionStyle}>{children}</Box></Box>);

上面我们做了两层嵌套，外面一层执行位置动画，里面一层执行缩放动画。因为这一层相对于外层的位置始终不变。外面带着内层移动了，但它相对于外层而言位置没有发生变化。

移动

移动的原理很简单，移动的偏移量 = 鼠标当前的位置 - 上次的偏移量后的位置（初始为0）；最小化、最大化、正常模式三个状态下的移动量都是分别保存的，当弹窗处于某一种状态下时就把它的位置信息更新到 position中以实现更新UI。

const normalPos = useRef({ x: 0, y: 0 }); // 正常模式下弹窗的位置（translate的值）
const minPos = useRef({ x: 0, y: 0 }); // 最小化时的位置
const maxPos = { x: 0, y: 0 }; // 最大化时的位置，因为最大化时弹窗的位置是固定的，所以不需要ref// 当所有模式下的位置变化都是通过position来反映到UI上的，所以position是唯一的位置状态
const [position, setPosition] = useState({x: 0, y: 0}); // 弹窗的位置（translate的值）// 当鼠标按下时，记录鼠标的位置并以当前位置为基准进行拖动（相对位置），与position的差值为偏移量，position为上一次的偏移量。
// 因为采用的是translate的方式进行拖动，这种方式下，是以组件第一次渲染的位置为基准参考点（也就是相对0,0的位置）进行拖动的.
// 正常模式下的偏移量
const normalOffsetX = useRef(0); // x轴偏移量
const normalOffsetY = useRef(0); // y轴偏移量// 最小化时的偏移量
const minOffsetX = useRef(0); // x轴偏移量
const minOffsetY = useRef(0); // y轴偏移量const initedRect = useRef(0); // 初始化后的弹窗大小

偏移量的计算如下：

// 鼠标移动事件
const handleMouseMove = (e) => {if (isDragging) {switch (stateMode) {case 0:const xt = e.clientX - minOffsetX.current;const yt = e.clientY - minOffsetY.current;const xtMinTop = -((windowSize.height - minHeight) / 2 - 10);const xtMaxTop = (windowSize.height - minHeight) / 2 - 10;const xtMinLeft = -((windowSize.width - minWidth) / 2 - 10);const xtMaxLeft = (windowSize.width - minWidth) / 2 - 10;const xm = xt < xtMinLeft ? xtMinLeft : xt > xtMaxLeft ? xtMaxLeft : xt;const ym = yt < xtMinTop ? xtMinTop : yt > xtMaxTop ? xtMaxTop : yt;minPos.current = { x: xm, y: ym};setPosition({ ...minPos.current });break;case 2:break;default:const xTmp = e.clientX - normalOffsetX.current;const yTmp = e.clientY - normalOffsetY.current;const minLetf = -(windowSize.width - initedRect.current.width) / 2; const minTop = -(windowSize.height - initedRect.current.height) / 2;const maxLeft = (windowSize.width - initedRect.current.width) / 2;const maxTop = (windowSize.height - initedRect.current.height) / 2;const x = xTmp < minLetf ? minLetf : xTmp > maxLeft ? maxLeft : xTmp;const y = yTmp < minTop ? minTop : yTmp > maxTop ? maxTop : yTmp;normalPos.current = { x, y };setPosition({ ...normalPos.current });break;}}
};

状态0 为最小化，1 为正常模式、2为最大化模式，由于最大化下是固定的，所以不用复杂计算。

完整的代码如下：

_Draggable.jsx

/** @jsxImportSource @emotion/react */
import { css, keyframes } from '@emotion/react'
import React, { useEffect, useRef, useState } from 'react';
import Box from '@mui/material/Box';
import { useOutsideClick } from './_useOutsideClick';
import { useWindowSize } from './_useWindowSize';
import { minHeight, minWidth } from './_ModelConfigure';//弹窗的动画
const attentionKeyframes = keyframes`from,to {transform: scale(1);}50% {transform: scale(1.03);}
`;//弹窗的开始时动画
const anim = css`animation: ${attentionKeyframes} 400ms ease;
`;//弹窗的结束时动画
const stopAnim = css`animation: null;
`;const draggableHandler = ".model-handler"; // 拖动句柄的类名/*** 拖动组件，使被包裹的组件可以拖动，支持拖动句柄* @param {是否启用拖动句柄 } enableHandler * @param {拖动句柄的类名} draggableHandler* @param {外部点击事件} onOutsideClick*/
export default function Draggable({children, // 子组件enableDragging = true,enableHandler = false, // 是否启用拖动句柄stateMode
}) {const [attentionStyle, setAttentionStyle] = useState(anim); // 弹窗动画,当点击外部时，弹窗会有一个动画效果const [isDragging, setIsDragging] = useState(false); // 是否正在拖动const [canDrag, setCanDrag] = useState(true); // 是否可以触发拖动操作，改变鼠标样式const normalPos = useRef({ x: 0, y: 0 }); // 正常模式下弹窗的位置（translate的值）const minPos = useRef({ x: 0, y: 0 }); // 最小化时的位置const maxPos = { x: 0, y: 0 }; // 最大化时的位置，因为最大化时弹窗的位置是固定的，所以不需要ref// 当所有模式下的位置变化都是通过position来反映到UI上的，所以position是唯一的位置状态const [position, setPosition] = useState({x: 0, y: 0}); // 弹窗的位置（translate的值）// 当鼠标按下时，记录鼠标的位置并以当前位置为基准进行拖动（相对位置），与position的差值为偏移量，position为上一次的偏移量。// 因为采用的是translate的方式进行拖动，这种方式下，是以组件第一次渲染的位置为基准参考点（也就是相对0,0的位置）进行拖动的.// 正常模式下的偏移量const normalOffsetX = useRef(0); // x轴偏移量const normalOffsetY = useRef(0); // y轴偏移量// 最小化时的偏移量const minOffsetX = useRef(0); // x轴偏移量const minOffsetY = useRef(0); // y轴偏移量const initedRect = useRef(0); // 初始化后的弹窗大小const wrapperRef = useRef(null);const windowSize = useWindowSize();// 当点击外部时，弹窗会有一个注目动画效果useOutsideClick(wrapperRef, () => {setAttentionStyle(anim);});// 弹窗注目动画的监听useEffect(function () {// 弹窗动画监听事件const listener = (e) => {if (e.type === "animationend") {setAttentionStyle(stopAnim);}};if (wrapperRef.current !== null) {wrapperRef.current.addEventListener("animationend", listener, true);}return () => {if (wrapperRef.current !== null) {wrapperRef.current.removeEventListener("animationend", listener);}};}, []);// document的鼠标移动事件和鼠标抬起事件监听useEffect(() => {// 鼠标移动事件const handleMouseMove = (e) => {if (isDragging) {switch (stateMode) {case 0:const xt = e.clientX - minOffsetX.current;const yt = e.clientY - minOffsetY.current;const xtMinTop = -((windowSize.height - minHeight) / 2 - 10);const xtMaxTop = (windowSize.height - minHeight) / 2 - 10;const xtMinLeft = -((windowSize.width - minWidth) / 2 - 10);const xtMaxLeft = (windowSize.width - minWidth) / 2 - 10;const xm = xt < xtMinLeft ? xtMinLeft : xt > xtMaxLeft ? xtMaxLeft : xt;const ym = yt < xtMinTop ? xtMinTop : yt > xtMaxTop ? xtMaxTop : yt;minPos.current = { x: xm, y: ym};setPosition({ ...minPos.current });break;case 2:break;default:const xTmp = e.clientX - normalOffsetX.current;const yTmp = e.clientY - normalOffsetY.current;const minLetf = -(windowSize.width - initedRect.current.width) / 2; const minTop = -(windowSize.height - initedRect.current.height) / 2;const maxLeft = (windowSize.width - initedRect.current.width) / 2;const maxTop = (windowSize.height - initedRect.current.height) / 2;const x = xTmp < minLetf ? minLetf : xTmp > maxLeft ? maxLeft : xTmp;const y = yTmp < minTop ? minTop : yTmp > maxTop ? maxTop : yTmp;normalPos.current = { x, y };setPosition({ ...normalPos.current });break;}}};// 鼠标抬起事件const handleMouseUp = (e) => {if (e.button !== 0) return;setIsDragging(false);};// 在相关的事件委托到document上if (isDragging) {document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);} else {document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);}// 组件卸载时移除事件return () => {document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);};}, [isDragging]);// 弹窗位置的监听, 每当弹窗状态改变时，都会重新设置弹窗的位置, 将相应状态下的最后位置设置为当前位置// 但最小化状态下的位置有所不同，因为最小化状态下的初始位置为左下角，每次从其它状态切换到最小化状态时都要进行相同的设置。useEffect(() => {switch (stateMode) {case 0:const initX = -((windowSize.width - minWidth - 20) / 2);const initY = windowSize.height / 2 - minHeight + 10;setPosition({ x: initX, y: initY });minPos.current = { x: initX, y: initY };break;case 2:setPosition({...maxPos.current});break;default:setPosition({ ...normalPos.current });break;}}, [stateMode]);// ref对象的鼠标移动事件，用于判断是否在拖动句柄上const onMouseMove = (e) => {if (!enableDragging) {setCanDrag(false);return;}if (enableHandler) {const clickedElement = e.target;// 检查鼠标点击的 DOM 元素是否包含特定类名if (clickedElement.classList.contains(draggableHandler)) {setCanDrag(true);} else {setCanDrag(false);}}}// ref对象的鼠标按下事件，用于触发拖动操作，// 如果启用了拖动句柄，那么只有在拖动句柄上按下鼠标才会触发拖动操作，// 否则直接按下鼠标就会触发拖动操作const handleMouseDown = (e) => {if (!enableDragging) return;switch (stateMode) {case 0:if (enableHandler) {// 判断是否在拖动句柄上const curElement = e.target;// 检查鼠标点击的 DOM 元素是否包含特定类名if (curElement.classList.contains(draggableHandler)) {if (e.button !== 0) return;setIsDragging(true);minOffsetX.current = e.clientX - minPos.current.x;minOffsetY.current = e.clientY - minPos.current.y;} else {setCanDrag(false);}} else {if (e.button !== 0) return;setIsDragging(true);minOffsetX.current = e.clientX - minPos.current.x;minOffsetY.current = e.clientY - minPos.current.y;}return;case 2:return; default:if (enableHandler) {// 判断是否在拖动句柄上const curElement = e.target;// 检查鼠标点击的 DOM 元素是否包含特定类名if (curElement.classList.contains(draggableHandler)) {if (e.button !== 0) return;setIsDragging(true);normalOffsetX.current = e.clientX - normalPos.current.x;normalOffsetY.current = e.clientY - normalPos.current.y;} else {setCanDrag(false);}} else {if (e.button !== 0) return;setIsDragging(true);normalOffsetX.current = e.clientX - normalPos.current.x;normalOffsetY.current = e.clientY - normalPos.current.y;}return;}};return (<Boxref={wrapperRef}sx={{transform: `translate(${position.x}px, ${position.y}px)`,cursor: canDrag ? isDragging ? "grabbing" : "grab" : "default",transition: isDragging ? null : `transform 200ms ease-in-out`,}}onMouseDown={handleMouseDown}onMouseMove={onMouseMove}onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}onPointerEnter={() => {if (initedRect.current === 0 && wrapperRef.current !== null) {const rect = wrapperRef.current.getBoundingClientRect();initedRect.current = {width: rect.width,height: rect.height,};}}}><Boxsx={{transform: `${isDragging ? "scale(1.03)" : "scale(1)"}`,transition: `transform 200ms ease-in-out`,}}css={attentionStyle}>{children}</Box></Box>);
}

上面我都做了说明，应该不难理解。这样我们组合后我们弹窗就可以移动了。最后的测试请关注下一篇文章。

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

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

相关文章

Mysql DATETIME与TIMESTAMP的区别

Mysql DATETIME与TIMESTAMP的区别

TIMESTAMP的取值范围小&#xff0c;并且TIMESTAMP类型的日期时间在存储时会将当前时区的日期时间值转换为时间标准时间值&#xff0c;检索时再转换回当前时区的日期时间值。 而DATETIME则只能反映出插入时当地的时区&#xff0c;其他时区的人查看数据必然会有误差的。 DATETI…
阅读更多...
数据结构——lesson4带头双向循环链表实现

数据结构——lesson4带头双向循环链表实现

前言✨✨ &#x1f4a5;个人主页&#xff1a;大耳朵土土垚-CSDN博客 &#x1f4a5; 所属专栏&#xff1a;数据结构学习笔记​​​​​​ &#x1f4a5;双链表与单链表的区分&#xff1a;单链表介绍与实现 &#x1f4a5;对于malloc函数有疑问的:动态内存函数介绍 感谢大家的观看…
阅读更多...
tomcat安装步骤流程

tomcat安装步骤流程

安装tomcat是基于安装java的基础上的 JAVA 举例说明&#xff1a; 关闭防火墙 下载java [rootlocalhost ~]#yum install java -y rootlocalhost ~]#yum install epel-release.noarch -y [rootlocalhost ~]#yum provides */javac [rootlocalhost data]#yum install java-1.8.0-o…
阅读更多...
半监督学习理解

半监督学习理解

半监督 少量有标注&#xff0c;大量无标注 1.三个假设&#xff1a; (1)连续性/平滑性假设&#xff1a;相近的数据点可能有相同的标签 (2)集群假设&#xff1a;在分类问题中&#xff0c;数据往往被组织成高密度的集群&#xff0c;同一集群的数据点可能具有相同的标签。因此&…
阅读更多...
C/C++常见的字符串操作函数

C/C++常见的字符串操作函数

2 字符串操作 ​ 由双引号&#xff08;Double Quote&#xff09;引起来的一串字符称为字符串字面值&#xff08;String Literal&#xff09;&#xff0c;或者简称字符串。注&#xff1a;字符串的结束标志是一个 \0 的转义字符。在计算字符串长度的时候 \0 是结束标志&#xff…
阅读更多...
6.1 deeplabv3+的pth模型转换为rknn模型

6.1 deeplabv3+的pth模型转换为rknn模型

和yolov5的pth模型转换为rknn模型类似&#xff0c;deeplabv3的pth模型转为rknn模型的步骤是&#xff1a; pth------>onnx-------->rknn 1.pth转为onnx 代码如下&#xff1a; #!/usr/bin/env python3 # -*- coding: utf-8 -*- # by [jackhanyuan](https://github.com/…
阅读更多...
实现一个线程安全的单例模式

实现一个线程安全的单例模式

单例模式 单例模式能保证某个类在程序中只存在唯⼀⼀份实例,⽽不会创建出多个实例 某个类,在一个类,只应该创建出一个实例,使用单例模式,就可以对咱们的代码进行一个更严格的校验和检查 单例模式具体的实现⽅式有很多.最常⻅的是"饿汉"和"懒汉"两种单例…
阅读更多...
Linux之定时任务01

Linux之定时任务01

简介 Linux定时任务是一种可执行的命令或者脚本,在特定的时间或者时间间隔下自动执行。通过在系统中预设一些需要执行的任务,可以让Linux定时任务自动执行并完成这些任务。定时任务可以用于自动备份、系统清理、监控、自动化维护等任务。 一、apache服务器监控 [rootlocalhost…
阅读更多...
代码随想录算法训练营day27

代码随想录算法训练营day27

题目&#xff1a;93.复原IP地址、78.子集、90.子集II 参考链接&#xff1a;代码随想录 93.复原IP地址 思路&#xff1a;本题的思路和上题切割回文串类似&#xff0c;也是先要写一个判断函数&#xff0c;然后一个个切割。对返回条件&#xff0c;如果路径长度已经为4&#xff…
阅读更多...
DevEco Studio下载与安装（Windows）

DevEco Studio下载与安装（Windows）

下载地址&#xff1a; HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 安装时直接点击 next 即可。 运⾏已安装的DevEco Studio&#xff0c;⾸次使⽤&#xff0c;请选择Do not import settings&#xff0c;单击OK。 1.安装Node.js 如果本地有下载&#xff0c;可以…
阅读更多...
前端JS 时间复杂度和空间复杂度

前端JS 时间复杂度和空间复杂度

时间复杂度 BigO 算法的时间复杂度通常用大 O 符号表述&#xff0c;定义为 T(n) O(f(n)) 实际就是计算当一个一个问题量级&#xff08;n&#xff09;增加的时候&#xff0c;时间T增加的一个趋势 T(n)&#xff1a;时间的复杂度&#xff0c;也就相当于所消耗的时长 O&#xff1…
阅读更多...
乐吾乐Web可视化RTSP播放

乐吾乐Web可视化RTSP播放

背景 乐吾乐致力于物联网和智能制造等场景的Web可视化平台和解决方案&#xff0c;其中摄像头播放必不可少。 当前国内摄像头都以RTSP协议为主&#xff0c;而HTML不能直接读取RTSP协议&#xff0c;因此需要一个转流服务。乐吾乐Web可视化播放RTSP也是如此&#xff1a; RTSP协…
阅读更多...
ArcGIS专用语言：Arcade详细介绍（一）

ArcGIS专用语言：Arcade详细介绍（一）

Arcade语言是专为在ArcGIS中使用而设计的。是一种可移植、轻量级且安全的表达语言&#xff0c;用于在ArcGIS应用程序中创建自定义内容。 与其他表达式语言一样&#xff0c;它可以执行数学计算、设置文本格式和计算逻辑语句&#xff0c;还支持多语句表达式、变量和流控制语句。…
阅读更多...
理解计算着色器中glsl语言的内置变量

理解计算着色器中glsl语言的内置变量

概要 本文通过示例的方式&#xff0c;着重解释以下几个内置变量&#xff1a; gl_WorkGroupSizegl_NumWorkGroupsgl_LocalInvocationIDgl_WorkGroupIDgl_GlobalInvocationID 基本概念 局部工作组与工作项 一个3x2x1的局部工作组示例如下&#xff0c;每个小篮格子表示一个工作项…
阅读更多...
Vulnhub靶机：basic_pentesting_1

Vulnhub靶机：basic_pentesting_1

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.4&#xff09; 靶机&#xff1a;basic_pentesting_1&#xff08;10.0.2.6&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/en…
阅读更多...
密码学——基本概念

密码学——基本概念

引言 在计算机和通信技术发达的现代社会，密码已经成为防止信息被篡改，盗取等方面不可或缺的技术。可应用于：本人身份认证，网上交易加密和认证。保证文件不被篡改的电子签名。电子邮件的加密等等领域。 密码学术语： 密码 cipher 基本词汇： 明文P（Plain text）= 没有经…
阅读更多...
TCP缓存

TCP缓存

TCP缓存是指TCP协议在数据传输过程中使用的一种机制&#xff0c;用于临时存储和管理数据包。它主要有三个作用&#xff1a;提高网络性能、保证数据的可靠性和实现流量控制。 首先&#xff0c;TCP缓存可以提高网络性能。当发送端发送数据时&#xff0c;TCP协议会将数据分割成若…
阅读更多...
如何实现无公网ip远程访问本地安卓Termux部署的MySQL数据库【内网穿透】

如何实现无公网ip远程访问本地安卓Termux部署的MySQL数据库【内网穿透】

文章目录 前言1.安装MariaDB2.安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 Android作为移动设备&#xff0c;尽管最初并非设计为服务器&#xff0c;但是随着技术的进步我们可以将Android配置为生产力工具&#xff0c;变成一个随身…
阅读更多...
VR危险环境模拟介绍|VR虚拟现实设备

VR危险环境模拟介绍|VR虚拟现实设备

VR危险环境模拟是指利用虚拟现实技术来模拟和展现各种危险环境&#xff0c;以便训练人员应对紧急情况、提高安全意识和应急反应能力。这种模拟可以涉及到工业、医疗、紧急救援等多个领域&#xff0c;旨在帮助人们在真实环境中面对危险时能够做出正确的应对和决策。 VR危险环境…
阅读更多...
Linux alias命令（为复杂命令创建别名，其中命令可带选项或参数）

Linux alias命令（为复杂命令创建别名，其中命令可带选项或参数）

文章目录 Mastering the Linux alias Command&#xff08;精通Linux的alias命令&#xff09;1. Understanding the alias Command&#xff08;理解alias命令&#xff09;示例Ubuntu20.04 arm操作系统OpenEuler20.03 arm操作系统 2. Basic Usage of alias&#xff08;alias的基本…
阅读更多...
最新文章

Copyright @ 2022~2023