-1

I have a simple div, with a function to obtain the coordinates of the mouse inside this div.

<div onMouseMove={this._onMouseMove}></div>

This function saves in the state, the coordinates of the div

constructor() {
    super();
    this.state = {
      selectedVariables: [],
      mouseCordinates: {x: 0, y: 0}
    };
  }

  _onMouseMove = e => {
    this.setState({x: e.screenX, y: e.screenY});
    console.log(`x: ${e.screenX}, y: ${e.screenY}`);
  }

And now I want to draw the variable helloWorld in this div in these concrete coordinates

helloWorld = 'Hello World';

<div onMouseMove={this._onMouseMove}>
  // Into this div it must paint the variable according to the coordinates
</div>

This is possible? Any ideas?

Thanks for your help.

NelbeDG
  • 425
  • 1
  • 7
  • 19
  • my question would be a simple: its javascript. Why wouldnt it? Have you even tried your code? – Fallenreaper Jun 20 '18 at 16:55
  • Thanks for your reply, but I think you do not understand my question. My code works perfectly but not with what I want to do. – NelbeDG Jun 21 '18 at 06:25
  • It looks like you are just wanting to when the mouse moves, have the div follow suit. On top of that, you want to display some text inside of it? Well, onMouseMove is monitored only from the div it is assigned, so youd want your canvas or workspace to have the mouse move. Then you would just need to define a div with a reference to the attribute therein. Then in your mousemove, would move the div with the approperiate ID. – Fallenreaper Jun 21 '18 at 16:07

1 Answers1

1

You can use the answer below as a starting point:

helloWorld = 'Hello World';

<div onMouseMove={this._onMouseMove}>
  // Into this div it must paint the variable according to the coordinates
<div style=`position:relative;left:${this.state.mouseCoordinates.x},
 top:${this.state.mouseCoordinates.y}`>{helloWorld}</div>
</div>

I am aware that my styling would be wrong because I'm using x and y coordinates to specify left and top in a position:relative, but I hope you can tweak around that part to achieve the desired result.

Chetan Jadhav CD
  • 1,116
  • 8
  • 14