您现在的位置是：网站首页> 编程资料编程资料

react优雅处理多条件鼠标拖拽位移_React_

2023-05-24 564人已围观

简介 react优雅处理多条件鼠标拖拽位移_React_

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

场景

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

state

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

jsx

                 {             setPosition({ ...p, left: position.left });           })}         >         
          {             setPosition({ ...p, top: position.top });           })}         >

监听

const handleDown =   (position: IPosition, setState: (position: IPosition) => void) => (e: React.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) => {     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 = (): ReactElement => {   const { axisPosition } = useElementContext();   const [position, setPosition] = useState(axisPosition);   useEffect(() => {     setPosition(axisPosition);   }, [axisPosition]);   return (                      {             setPosition({ ...p, left: position.left });           })}         >         
          {             setPosition({ ...p, top: position.top });           })}         >       
        ); }; 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;     }   } `;

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

您可能感兴趣的文章:

上一篇：react实现拖拽模态框_React_

下一篇：VScode中配置JavaScript编译环境的方法_javascript技巧_

您现在的位置是：网站首页> 编程资料编程资料

react优雅处理多条件鼠标拖拽位移_React_

场景

相关内容

点击排行

本栏推荐

猜你喜欢