这应该很简单，但每次我尝试时都会遇到不同的问题。
我正在尝试使用鼠标事件（例如 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);
}
我并不是要求完整的答案，但是任何人都可以指导我如何使用鼠标移动事件在屏幕上拖动图像吗？
Thanks
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
