代码使用函数组件编写
实现思路为点击div时,记录点击事件中鼠标相对于浏览器窗口可视区域的X,Y坐标,未松开鼠标移动时同样记录X,Y坐标,并计算出此次移动的距离与上次距离的差距,得出结果赋值到top属性和left属性上,达到预期效果前提是position为absolute。
import React, { useRef } from "react";
const Drag = (props) => {
let isMoving = false;
let position = [0, 0];
const movingDiv = useRef();
const styles = {
border: `1px red solid`,
width: `100px`,
height: `100px`,
position: `absolute`,
top: `0px`,
left: `0px`
};
const onMouseDown = (event) => {
isMoving = true;
position = [event.clientX, event.clientY];
};
const onMouseUp = () => {
isMoving = false;
};
const onMouseMove = (event) => {
if (!isMoving) return;
const div = movingDiv.current;
const deltaX = event.clientX - position[0];
const deltaY = event.clientY - position[1];
const top = parseInt(div.style.top, 0) || 0;
const left = parseInt(div.style.left, 0) || 0;
div.style.top = top + deltaY + "px";
div.style.left = left + deltaX + "px";
position = [event.clientX, event.clientY];
};
return (
<div
onMouseDown={onMouseDown}
onMouseMove={onMouseMove}
onMouseUp={onMouseUp}
onClick={props.onClick}
ref={movingDiv}
style={{ ...styles, ...props.style }} //样式可自定义并覆盖
></div>
);
};
export default Drag;
在其他组件中引入Drag组件,实现效果如下
import Drag from './Drag'
//...组件代码省略
return (<Drag/>)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!