react 拖拽组件（PC端）

最新推荐文章于 2025-07-18 11:21:03 发布

原创最新推荐文章于 2025-07-18 11:21:03 发布 · 7.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

前端同时被 2 个专栏收录

24 篇文章

订阅专栏

react

2 篇文章

订阅专栏

本文介绍了一个基于React的拖拽组件封装实现，通过自定义事件处理来实现元素的拖动功能，并提供了实时坐标反馈。该组件能够兼容不同浏览器的事件模型。

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

简单封装了下

import React from 'react'

const addEvent = (el, event, handler) => {
	if (!el) return;
	if (el.attachEvent) {
	  	el.attachEvent('on' + event, handler);
	} else if (el.addEventListener) {
	  	el.addEventListener(event, handler, false);
	} else {
	  	el['on' + event] = handler;
	}
  };
  
const removeEvent = (el, event, handler) => {
	if (!el) return;
	if (el.detachEvent) {
	  	el.detachEvent('on' + event, handler);
	} else if (el.removeEventListener) {
	  	el.removeEventListener(event, handler, false);
	} else {
	  	el['on' + event] = null;
	}
};

/*拖拽组件*/
class Drag extends React.Component {
	constructor() {
		super();
		this.state = {
			/*定义两个值用来存放当前元素的left和top值*/
			needX: 0,
			needY: 0,
		}
		/*定义两个值用来存放鼠标按下的地方距离元素上侧和左侧边界的值*/
		this.disX = 0;
		this.disY = 0;
	}
	/*定义鼠标下落事件*/
	fnDown = (e) => {
		/*事件兼容*/
		const event = e || window.event;
		/*事件源对象兼容*/
		const target = event.target || event.srcElement;
		/*获取鼠标按下的地方距离元素左侧和上侧的距离*/
		this.disX = event.clientX - target.offsetLeft;
		this.disY = event.clientY - target.offsetTop;
		// /*定义鼠标移动事件*/
		addEvent(document, 'mousemove', this.fnMove);
		// /*定义鼠标抬起事件*/
		addEvent(document, 'mouseup', this.fnUp);
	}
	/*定义鼠标移动事件*/
	fnMove = (e) => {
		/*事件兼容*/
		const event = e || window.event;
		/*事件源对象兼容*/
		const target = event.target || event.srcElement;
		this.setState({
			needX: event.clientX - this.disX,
			needY: event.clientY - this.disY,
		});
		this.props.onMove({offsetX: this.state.needX, offsetY: this.state.needY});
	}
	fnUp = () => {
		removeEvent(document, 'mousemove', this.fnMove);
    	removeEvent(document, 'mouseup', this.fnUp);
	}
	render() {
		/*返回元素*/
		return (
			<div onMouseDown={this.fnDown} 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,
				// transform: `translate(${this.state.needX}px, ${this.state.needY}px)`,
				cursor: "pointer",
			}}
			>{this.props.children}</div>
		)
	}
}
export default Drag

使用的话引用下就行

<Drag style={{width:'100px',height:'100px',backgroundColor:'green',position:'absolute'}} onMove={(offet)=>{
	console.log("拖拽元素当前位置：",offet);
}}>
	<div style={{
		pointerEvents: "none",
        width:'50px',
		height:'50px',
		background: "url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539180607654&di=6435dc00382b5d7682646cae1c36ca1b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9358d109b3de9c82036507ac6681800a19d84395.jpg) center center / 100% no-repeat",
		backgroundSize: "100% 100%",
	}}>sdsfds</div>
</Drag>

在父组件绑定onMove即可打印出实时的坐标