score:0

Accepted answer

@cbroe is correct, clientx and clienty is relative to viewport. what you can do is subtract it from the element's viewport x & y so you get the proper coordinates relative to the element's x & y

for example, if the element's x is 200px and the click is 245px, both relative to viewport, if you compute 245px - 200px you get 45px which is relative to the element because you got rid of the element's x from the click's x.

  const mousedown = (event: any) => {
    const x = event.clientx - event.currenttarget.getboundingclientrect().left
    const y = event.clienty - event.currenttarget.getboundingclientrect().top
    set_last_mousex(x);
    set_last_mousey(y);
    setmousedown(true);
  };

  //... 
  
  const mousemove = (event: any) => {
    const x = event.clientx - event.currenttarget.getboundingclientrect().left
    const y = event.clienty - event.currenttarget.getboundingclientrect().top
    set_mousex(x);
    set_mousey(y);
    visualrect();
  };

getboundingclientrect: https://developer.mozilla.org/en-us/docs/web/api/element/getboundingclientrect


Related Query

More Query from same tag