react鼠标拖动实现

实现方式：鼠标按下开启移动，鼠标移动元素位置跟随，鼠标抬起关闭移动
源码
jsx

this.divMouseDown(e)} onMouseUp={e=>this.divMouseUp(e)} onMouseMove={e=>this.divMouseMove(e)} style={{position:'absolute',left:this.canvasPos.x,top:this.canvasPos.y}}> 

脚本

divMouseDown(e) {this.setState({isMoving:true})}divMouseUp(e) {this.setState({isMoving:false})}divMouseMove(e) {let {isMoving,moveLastPos,canvasPos} = this.state;if(isMoving) {if (moveLastPos && moveLastPos.lastX && moveLastPos.lastY) {let dx = e.clientX - moveLastPos.lastX;let dy = e.clientY - moveLastPos.lastY;this.setState({canvasPos:{x:canvasPos.x + dx,y:canvasPos.y + dy}});}this.setState({moveLastPos:{lastX:e.clientX,lastY:e.clientY}});}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！