React 在react中实现鼠标拖拽移动盒子和图片(基于Ant-Design-Pro 4实现)

女爷i 2021-09-21 14:10 328阅读 0赞

### 目录 ###

*   *  主要用到函数
     *  逻辑代码
     *  样式

## 主要用到函数 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>归类</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>useState</td> 
   <td>react状态</td> 
  </tr> 
  <tr> 
   <td>useRef</td> 
   <td>react获取ref</td> 
  </tr> 
  <tr> 
   <td>useEffect</td> 
   <td>react初始化函数</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>js鼠标按下</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>js鼠标移动</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>js鼠标抬起</td> 
  </tr> 
 </tbody> 
</table>

这个基于 Ant-Design-Pro 4.1.0, 里面用到了一些 Ant Design 的UI 组件

*  [Ant Design Pro][]
 *  [Ant Design UI 组件库][Ant Design UI]

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

## 逻辑代码 ##

import React, {  useState, useRef, useEffect } from 'react';
    import {  Col } from 'antd';
    import {  MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
    import "./PictureModule.less";
    
    const drag = (obj, set) => { 
        // 鼠标被按下
        obj.onmousedown = (event) => { 
            event = event || window.event;
            // 阻止默认事件
            event.preventDefault();
    
            // 鼠标手
            obj.style.cursor = "grabbing";
    
            // 最大移动距离
            var maxMoveX = obj.clientWidth - 100;
            var maxMoveY = obj.clientHeight - 100;
    
            // 计算鼠标当前坐标 = 鼠标按下坐标 - 元素当前坐标(距离父元素距离)
            // div的水平偏移量 鼠标.clentX - 元素.offsetLeft
            // div的垂直偏移量 鼠标.clentY - 元素.offsetTop
            var ol = event.clientX - obj.offsetLeft;
            var ot = event.clientY - obj.offsetTop;
            
            // 绑定鼠标移动事件
            document.onmousemove = (event2) => { 
                event2 = event2 || window.event;
                // 计算移动距离 = 当前鼠标坐标 - 鼠标按下坐标
                var left = event2.clientX - ol;
                var top = event2.clientY - ot;
    
                // 判断左右移动距离
                if (left >= maxMoveX) { 
                    left = maxMoveX;
                } else if (left <= (-maxMoveX)) { 
                    left = -maxMoveX;
                }
                // 判断上下移动距离
                if (top >= maxMoveY) { 
                    top = maxMoveY;
                } else if (top <= (-maxMoveY)) { 
                    top = -maxMoveY;
                }
    
                set({  left, top });
            }
            
            // 绑定一个鼠标松开事件
            document.onmouseup = () => { 
                // 取消鼠标移动事件
                document.onmousemove = null;
                document.onmouseup = null;
                // 还原鼠标手
                obj.style.cursor = "grab";
            }
        }
    }
    
    export default ({  memoize, titleInfo, coords }) => { 
        // 缩放
        const [scale, setScale] = useState(1);
        const [scaleTwo, setScaleTwo] = useState(1);
        // 拖拽
        const [xyz, setXyz] = useState({  left: 0, top: 0 });
        const [xyzTwo, setXyzTwo] = useState({  left: 0, top: 0 });
    
        // 盒子元素
        const container = useRef(null);
        const containerTwo = useRef(null);
    
        // 放大
        const handleZoomIn = (val) => { 
            if (val === 1) { 
                setScale(scale + 0.5);
            } else if (val === 2) { 
                setScaleTwo(scaleTwo + 0.5)
            }
            
        };
    
        // 缩小
        const handleZoomOut = (val) => { 
            if (val === 1) { 
                if (scale <= 1) { 
                    setScale(1);
                    setXyz({  left: 0, top: 0 });
                } else { 
                    setScale(scale - 0.5);
                }
            } else if (val === 2) { 
                if (scaleTwo <= 1) { 
                    setScaleTwo(1);
                    setXyzTwo({  left: 0, top: 0 });
                } else { 
                    setScaleTwo(scaleTwo - 0.5);
                }
            }
            
        };
    
        useEffect(() => { 
            if (container) drag(container.current, setXyz);
            if (containerTwo) drag(containerTwo.current, setXyzTwo);
        }, []);
    
        
    
        return (
            <>
                <Col span={ 9}>
                    <div className="picture_title_box">
                        <div className="title_text" title={ titleInfo.srcName}>标准文档：{ titleInfo.srcName}</div>
                        <div className="title_btn_icon">
                            <MinusCircleOutlined onClick={ () => handleZoomOut(1)} />
                            <PlusCircleOutlined onClick={ () => handleZoomIn(1)} />
                        </div>
                    </div>
                    <div id="LeftXyzContainer" className="container_box">
                        <div
                            ref={ container}
                            style={ { 
                                position: "relative",
                                left: xyz.left, top: xyz.top,
                                transform: `scale3d(${ scale}, ${ scale}, 1) rotate(0deg)`,
                            }}
                        >
                            <img src={ memoize.src} width="100%" alt="图片加载失败" />
                            <div style={ {  position: 'absolute', backgroundColor: 'rgb(82, 196, 26, 0.5)', width: 0, height: 0, ...coords.left }} />
                        </div>
                    </div>
                </Col>
                <Col span={ 9}>
                    <div className="picture_title_box">
                        <div className="title_text" title={ titleInfo.dstName}>比对文档：{ titleInfo.dstName}</div>
                        <div className="title_btn_icon">
                            <MinusCircleOutlined onClick={ () => handleZoomOut(2)} />
                            <PlusCircleOutlined onClick={ () => handleZoomIn(2)} />
                        </div>
                    </div>
                    <div id="RightXyzContainer" className="container_box">
                        <div
                            ref={ containerTwo}
                            style={ { 
                                position: "relative",
                                cursor: "grab",
                                left: xyzTwo.left, top: xyzTwo.top,
                                transform: `scale3d(${ scaleTwo}, ${ scaleTwo}, 1) rotate(0deg)`,
                            }}
                        >
                            <img src={ memoize.dst} width="100%" alt="图片加载失败" />
                            <div style={ {  position: 'absolute', backgroundColor: 'rgb(82, 196, 26, 0.5)', width: 0, height: 0, ...coords.right }} />
                        </div>
                    </div>
                </Col>
            </>
        );
    };

## 样式 ##

@import '~antd/es/style/themes/default.less';
    
    
    // 标题盒子 .picture_title_box { 
        height: 40px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fafafa;
    }
    
    // 标题文字 .title_text { 
        flex: 1;
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    // 标题按钮 .title_btn_icon { 
        width: 50px;
        font-size: 18px;
        margin-left: 24px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
    }
    
    // 容器盒子 .container_box { 
        overflow: hidden;
        position: relative;
        border: 1px solid #a5b1b8;
        background-color: #f3f3f3;
    }

[Ant Design Pro]: https://ant-design-pro.gitee.io/docs/getting-started-cn
[Ant Design UI]: https://ant-design.gitee.io/components/button-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/50b2a8b8974e46ebb606c6b650d073cd.png