快捷導(dǎo)航

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

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

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

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

場(chǎng)景

三種拖拽條件可縱軸橫軸和全部方向如果加3個(gè)監(jiān)聽(tīng)重復(fù)代碼太多
因?yàn)闋顟B(tài)更改組件會(huì)重新渲染所以寫的時(shí)候要多注意避免有大量代碼的函數(shù)多次創(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)聽(tīng)

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è)務(wù)代碼

/*
?* @Author: hongbin
?* @Date: 2022-04-03 13:38:02
?* @LastEditors: hongbin
?* @LastEditTime: 2022-04-03 21:49:42
?* @Description:移動(dòng)坐標(biāo)軸
?*/
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;
? ? }
? }
`;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: