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;
? ? }
? }
`;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于react优雅处理多条件鼠标拖拽位移的详细内容...