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; } } `;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)