在360度屏幕上移动元素



我正在尝试练习如何将元素从屏幕上移动或返回屏幕。我有360度等矩形的图像。并在图像的某些点上添加元素。所以,当图像的视角发生变化时,也要尝试移动上面的元素。例如

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) + "%";
})
}
}

在上面的代码中,元素在移动,但当然,在鼠标单击并跟随它移动的每个click and move元素上都会弹出。我理解这个问题。e.clientX / window.innerWidth * 100)总是指向光标。那么我该如何解决这个问题呢?

很难理解你想要实现什么,如果你有一个,代码笔会很有帮助

最新更新