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

主要用到函数

名称	归类
useState	react状态
useRef	react获取ref
useEffect	react初始化函数
onmousedown	js鼠标按下
onmousemove	js鼠标移动
onmouseup	js鼠标抬起

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

Ant Design Pro
Ant Design UI 组件库

逻辑代码

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 - 元素.offsetTopvar 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"><divref={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"><divref={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;
}

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

React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
JavaScript中随着鼠标拖拽而移动的块
这里要设置一个div块,你按住它拖拽,它会随着你的鼠标走,比如常见的登录框. 给这个div设置简单的样式: 由于div是要跟着鼠标活动的,所以必须把position设置为绝对定位,也就是位置可以改变才 ...
js鼠标拖拽移动盒子但只在父框内移动（三种写法）
// 1 父框没有定位<style>#box {width: 50px;height: 50px;background-color: #e74c3c;position: absolute; ...
unity2d里实现鼠标拖拽物体的功能
在 Unity 中实现鼠标拖拽物体的功能需要使用到 Unity 的 Physics 系统. 要实现鼠标拖拽物体,你需要在场景中添加以下内容: 一个 Rigidbody 2D 组件,用于控制物体的运动. ...
【计算机图形】制作能够利用鼠标拖拽实现360度旋转的3D人体模型flash文件
前段时间,由于要对参加挑战杯的系统进行改善,老师要求我们在系统当中添加一个可旋转的3D人体模型,于是俺陷入了深深的思考当中.之前一直都没有接触过3D模型的制作,而且老师这回给的时间又特紧,当时那个急呀 ...
JS中鼠标拖拽div（2）（setCapture()方法和releaseCapture()方法）
接着鼠标拖拽div(1)解决问题,当在拖拽事件所在的页面按下键盘的ctrl+A全选后,再去拖拽div,浏览器会默认去搜索网页中的内容,拖拽功能就会失效,(搜索网页内容是浏览器的默认行为,所以要想不发生 ...
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
onmousedown:鼠标的按下事件 onmouseove:鼠标的移动事件 onmouseup:鼠标的松开事件思路: 想实现鼠标拖拽div移动的效果,就得先获取到div,然后给div绑定鼠标按下的 ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
unity3d鼠标拖拽模型，旋转模型
直接挂载到模型上 using UnityEngine; using System.Collections;public class OnDrag : MonoBehaviour {//目标物体publ ...
自动化测试之鼠标悬浮操作、双击、鼠标拖拽
鼠标操作.封装在ActionChains中 -move_to_element -double_click 双击 -context_click right_click 右键 -drag_and_drop ...

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

目录

主要用到函数

逻辑代码

样式

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

最新文章

热门文章