本文实例为大家分享了react优雅处理多条件鼠标拖拽位移的具体代码，供大家参考，具体内容如下

场景

三种拖拽条件 可纵轴 横轴 和全部方向 如果加3个监听重复代码太多
因为状态更改组件会重新渲染 所以写的时候要多注意避免有大量代码的函数多次创建销毁

state

const [position, setPosition] = useState(axisPosition);

jsx

<Container
  >phpt;
  </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", canphpcel);
  document.addEventListener("mouseleave", cancel);
 };

const Axis: FC<IProps> = (): ReactElement => {
 const {python axisPosition } = useElementContext();
 const [position, setPosition] = useState<IPosition>(axisPosition);

 useEffect(() => {
  setPosition(axisPosition);
 }, [axisPosition]);

 return (
  <Container
  >php  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;
  }
 }
`;

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