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

Question

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

我正在尝试使用鼠标事件(例如 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);

}

我不要求一个完整的答案，但任何人都可以指导我如何使用鼠标移动事件在屏幕上拖动图像吗？

谢谢

Answer 1

var dog = document.getElementById("dogPic");
var cat = document.getElementById("catPic");
var moving = false;

dog.addEventListener("mousedown", initialClick, false);
cat.addEventListener("mousedown", initialClick, false);


function move(e){

  var newX = e.clientX - 10;
  var newY = e.clientY - 10;

  image.style.left = newX + "px";
  image.style.top = newY + "px";

  
}

function initialClick(e) {

  if(moving){
    document.removeEventListener("mousemove", move);
    moving = !moving;
    return;
  }
  
  moving = !moving;
  image = this;

  document.addEventListener("mousemove", move, false);

}

#dogPic, #catPic {
  width: 20px;
  height: 20px;
  position: absolute;
  background: red;
  top: 10px;
  left: 10px;
}

#dogPic {
  background: blue;
  top: 50px;
  left: 50px;
}

<div id="dogPic"></div>
<div id="catPic"></div>