react---拖拽组件

最新推荐文章于 2025-05-04 19:01:53 发布

guoxiaxing

最新推荐文章于 2025-05-04 19:01:53 发布

阅读量6k

点赞数 1

分类专栏：前端框架文章标签：拖拽组件

本文链接：https://blog.youkuaiyun.com/hahahahahahahaha__1/article/details/80694175

版权

前端框架专栏收录该内容

23 篇文章

订阅专栏

本文档展示了一个React组件——Drag，该组件实现了基本的拖拽功能。通过监听鼠标按下、移动和抬起事件，更新元素的left和top值，使元素能够随鼠标移动。组件的样式、宽度、高度和背景色可以通过props传递，并使用了Babel进行JSX转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>drag--react</title>
	<script src='react.js'></script>
	<script src='react-dom.js'></script>
	<script src='babel.min.js'></script>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
</style>
<body>
	<div id='example'></div>
	<script type='text/babel'>
		/*拖拽组件*/
		class Drag extends React.Component{
			constructor(){
				super();
				this.state = {
					/*定义两个值用来存放当前元素的left和top值*/
					needX:0,
					needY:0
				}
				/*定义两个值用来存放鼠标按下的地方距离元素上侧和左侧边界的值*/
				this.disX = 0;
				this.disY = 0;
			}
			/*定义鼠标下落事件*/
			fnDown(e){
				/*事件兼容*/
				let event = e || window.event;
				/*事件源对象兼容*/
				let target = event.target || event.srcElement;
				/*获取鼠标按下的地方距离元素左侧和上侧的距离*/
				this.disX = event.clientX - target.offsetLeft;
				this.disY = event.clientY - target.offsetTop;
				/*定义鼠标移动事件*/
				document.onmousemove = this.fnMove.bind(this);
				/*定义鼠标抬起事件*/
				document.onmouseup = this.fnUp.bind(this);
			}
			/*定义鼠标移动事件*/
			fnMove(e){
				/*事件兼容*/
				let event = e|| window.event ;
				/*事件源对象兼容*/
				let target = event.target || event.srcElement;
				this.setState({
					needX:event.clientX - this.disX,
					needY:event.clientY - this.disY
				});
			}
			fnUp(){
				document.onmousemove = null;
				document.onmuseup = null;
			}
			render(){
				/*返回元素*/
				return (
					<div style={{width:this.props.style.width,height:this.props.style.height,backgroundColor:this.props.style.backgroundColor,position:this.props.style.position,left:this.state.needX,
					top:this.state.needY}} onMouseDown={this.fnDown.bind(this)}></div>
				)
			}
		}
		ReactDOM.render(
			/*渲染组件*/
			/*通过props属性进行传值*/
			<Drag style={{width:'100px',height:'100px',backgroundColor:'green',position:'absolute'}}/>,
			document.getElementById('example')
		);
	</script>
</body>
</html>