react 拖拽组件(PC端)

本文介绍了一个基于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即可打印出实时的坐标

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值