react优雅处理多条件鼠标拖拽位移
更新时间：2022年08月26日 15:22:25 作者：Jedi Hongbin
这篇文章主要为大家详细介绍了react优雅处理多条件鼠标拖拽位移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了react优雅处理多条件鼠标拖拽位移的具体代码，供大家参考，具体内容如下
场景
三种拖拽条件 可纵轴 横轴 和全部方向 如果加3个监听重复代码太多
因为状态更改组件会重新渲染 所以写的时候要多注意避免有大量代码的函数多次创建销毁
state
const [position, setPosition] = useState(axisPosition);
jsx
<Container
style={{
top: position.top + "px",
left: position.left + "px",
}}
>
<div>
<span
onMouseDown={handleDown(position, (p) => {
setPosition({ ...p, left: position.left });
})}
></span>
<div onMouseDown={handleDown(position, setPosition)}></div>
<span
onMouseDown={handleDown(position, (p) => {
setPosition({ ...p, top: position.top });
})}
></span>
</div>
</Container>监听
const handleDown =
(position: IPosition, setState: (position: IPosition) => void) => (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
const startX = e.pageX;
const startY = e.pageY;
const { top, left } = position;
const move = (ev: MouseEvent) => {
const disX = ev.pageX - startX;
const disY = ev.pageY - startY;
setState({ left: left + disX, top: top + disY });
};
const cancel = () => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", cancel);
document.removeEventListener("mouseleave", cancel);
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", cancel);
document.addEventListener("mouseleave", cancel);
};业务代码
/*
* @Author: hongbin
* @Date: 2022-04-03 13:38:02
* @LastEditors: hongbin
* @LastEditTime: 2022-04-03 21:49:42
* @Description:移动坐标轴
*/
import { FC, ReactElement, useEffect, useState } from "react";
import styled from "styled-components";
import { useElementContext } from "../../context/ElementContext";
import { flexCenter } from "../../styled";
interface IProps {}
interface IPosition {
top: number;
left: number;
}
const handleDown =
(position: IPosition, setState: (position: IPosition) => void) => (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
const startX = e.pageX;
const startY = e.pageY;
const { top, left } = position;
const move = (ev: MouseEvent) => {
const disX = ev.pageX - startX;
const disY = ev.pageY - startY;
setState({ left: left + disX, top: top + disY });
};
const cancel = () => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", cancel);
document.removeEventListener("mouseleave", cancel);
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", cancel);
document.addEventListener("mouseleave", cancel);
};
const Axis: FC<IProps> = (): ReactElement => {
const { axisPosition } = useElementContext();
const [position, setPosition] = useState<IPosition>(axisPosition);
useEffect(() => {
setPosition(axisPosition);
}, [axisPosition]);
return (
<Container
style={{
top: position.top + "px",
left: position.left + "px",
}}
>
<div>
<span
onMouseDown={handleDown(position, (p) => {
setPosition({ ...p, left: position.left });
})}
></span>
<div onMouseDown={handleDown(position, setPosition)}></div>
<span
onMouseDown={handleDown(position, (p) => {
setPosition({ ...p, top: position.top });
})}
></span>
</div>
</Container>
);
};
export default Axis;
const Container = styled.div`
position: absolute;
z-index: 99999;
transform: translateX(-6px);
& > div {
background: #c711ff;
width: 0px;
height: 0px;
border-radius: 0px;
border: 3px solid #c711ff;
position: relative;
${flexCenter};
span {
position: absolute;
:first-child {
cursor: ns-resize;
background-color: red;
width: 2px;
height: 3vw;
transform: translateY(-60%);
::before {
content: "";
border: 4px solid red;
top: 0;
left: -3px;
position: absolute;
transform: scaleY(4) rotate(180deg);
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
transform-origin: top;
}
}
:last-child {
cursor: ew-resize;
width: 3vw;
height: 2px;
background-color: blue;
transform: translateX(60%);
::before {
content: "";
border: 4px solid blue;
top: -3px;
right: 0;
position: absolute;
transform: scaleX(4) rotate(-90deg) translateY(50%);
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
}
}
div {
cursor: move;
width: inherit;
height: inherit;
border: inherit;
border-radius: inherit;
background-color: inherit;
position: absolute;
z-index: 1;
}
}
`;以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了redux的原理、工作流程及其应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Hook是 React 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能，这篇文章主要介绍了React自定义hook的相关知识,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了React注册倒计时功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
React router cache route实现缓存页面流程介绍
react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持2023-01-01
这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最近刚开始接触 React,突然脑海出现一个问题,React中怎么在状态更新时获取它的旧值,特别是如果你之前用过 Vue,你可能会想知道 React 中有没有类似 Vue 的 watch 属性,那么react中怎么实现呢？本文就给大家介绍一下React如何获取状态的旧值,需要的朋友可以参考下2024-07-07
这篇文章主要为大家介绍了React表中显示JSON数据demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
30分钟精通React今年最劲爆的新特性——React Hooks
这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了react中label标签for报错问题，解决办法就是react中label标签没有for属性，用htmlFor代替for属性,感兴趣的朋友跟随小编一起看看吧2022-02-02
这篇文章主要介绍了如何使用 React Hooks 重构类组件,本文就来通过一些常见示例看看如何使用 React Hooks 来重构类组件，需要的朋友可以参考下2022-07-07
最新评论