日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react優雅處理多條件鼠標拖拽位移_React

作者：Jedi?Hongbin ? 更新時間： 2022-10-23 編程語言

本文實例為大家分享了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;
? ? }
? }
`;

原文鏈接：https://blog.csdn.net/printf_hello/article/details/123945473

欄目分類
最近更新