I am trying to workout how to move elements off the screen or return back to screen. I have 360 degree equirectangular image. And putting elements on that image's certain points. So when image's view degree changes, trying to move those elements on it too. For example.

const mouseDownHandler = (e: MouseEvent): void => {
  clicked= true
}

const mouseUpHandler = (e: MouseEvent): void => {
  clicked= false
}


const mouseMoveHandler = (e: MouseEvent) => {
  if (clicked) {
    elements.forEach(item => {
      item.style.left = (item.computedStyleMap().get('left').value + e.clientX /  window.innerWidth * 100) + "%";
    })
  }
}

with the code above, elements are moving but ofcourse on every click and move elements popping up where mouse clicked and follows it while moving. I understand the problem. e.clientX / window.innerWidth * 100) is always points the cursor. So how can I solve the issue here?