react優(yōu)雅處理多條件鼠標拖拽位移

更新時間：2022年08月26日 15:22:25 作者：Jedi Hongbin

這篇文章主要為大家詳細介紹了react優(yōu)雅處理多條件鼠標拖拽位移，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react優(yōu)雅處理多條件鼠標拖拽位移的具體代碼，供大家參考，具體內容如下

場景

三種拖拽條件可縱軸橫軸和全部方向如果加3個監(jiān)聽重復代碼太多
因為狀態(tài)更改組件會重新渲染所以寫的時候要多注意避免有大量代碼的函數多次創(chuàng)建銷毀

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>

監(jiān)聽

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

業(yè)務代碼

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: