Creé una clase que representa un div al que conecté algunas funciones que se ejecutan cada vez que el usuario comienza a hacer clic y arrastrar dentro de la vista (evento onMouseMove). He usado el siguiente código para hacerlo:

 class MouseMover extends React.Component { state = { x: 0, y: 0, open: false }; handleMouseMove = e => { if (!this.state.open) { return } this.setState({ x: e.clientX, y: e.clientY }); }; started = e => { this.setState({ open: true }); }; ended = e => { this.setState({ open: false }); }; render() { return ( <div onPointerDownCapture={this.started} onPointerLeave={this.ended} onPointerUpCapture={this.ended} onMouseMove={this.handleMouseMove} className='gesture-view'> {this.state.x || this.state.y ? "The mouse is at x: " + this.state.x + ", y: " + this.state.y : "Move the mouse over this box"} </div> ); } }

La pregunta que tengo se relaciona con los valores x e y (la posición del mouse mientras se arrastra). Los valores posicionales son relativos a toda la pantalla visible. Esto significa que cuando el usuario hace clic y arrastra hacia el extremo izquierdo del div, el valor de x será 60, porque tengo un margen de 5vw a la izquierda. Me gustaría que los valores posicionales se relacionen con el div al que están conectados los eventos. Cuando el usuario hace clic y arrastra hacia la parte izquierda del div, el valor de x debe moverse hacia cero, no hacia 60.

No estoy seguro de que esta sea la información necesaria, pero podría valer la pena saber que la función de mi aplicación, que presento en el DOM, se ve así:

 function App() { return ( <div className="App"> <MouseMover /> </div> ); }

Es bastante sencillo, pero necesito solucionar el problema antes de continuar, ya que esto es solo un prototipo.