使用Javascript通过鼠标事件移动图像。

6 浏览
0 Comments

使用Javascript通过鼠标事件移动图像。

这应该很简单，但每次尝试都会遇到不同的问题。

我正在尝试使用鼠标事件（如mousedown、mouseup、mousemove、clientX和clientY）在屏幕上移动图像。然后，我尝试使用绝对定位将其应用到图像上。

我以为下面的代码会起作用，因为我在初始点击时获取了坐标，然后的想法是通过鼠标移动来更新它们，但这并不起作用。

var image;
var dog = document.getElementById("dogPic");
var cat = document.getElementById("catPic");
dog.addEventListener("mousedown", initialClick, false);
cat.addEventListener("mousedown", initialClick, false);
function initialClick(e) {
    var initialX = e.clientX;
    var initialY = e.clientY;
    image = document.getElementById(this.id);
    document.addEventListener("mousemove", function(e){
        var newX = e.clientX - initialX;
        var newY = e.clientY - initialY;  
        image.style.left = newX;
        image.style.top = newY;
    }, false);
}

我不是要求完整的答案，但有人可以指导我如何使用鼠标移动事件拖动图像吗？

谢谢

0