I have a set of divs which are dynamic, I somehow want them in a different order. So I'm using flex order to control the order of the divs. One of the div contains an image. By clicking on that image it should console the x & y coordinates of the click which is related to the image. I have made everything I want. But the problem is I'm getting the y coordinates in a negative number, I believe it is because of the order I have changed using flex.
The expected result: When I click on the border image top left position it should console the exact position of the click which is related to the image.
This is caused by your own calculations. You can simplify the calculation using this function
GetMousePositionRelativeToTarget(e) {
// Get the target
const target = e.target;
// Get the bounding rectangle of target
const rect = target.getBoundingClientRect();
// Mouse position
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
console.log(x + ':' + y);
return [x, y];
}