这应该很简单，但每次我尝试时都会遇到不同的问题。
我正在尝试使用鼠标事件（例如 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);
}
我并不是要求完整的答案，但任何人都可以指导我如何使用鼠标移动事件在屏幕上拖动图像吗？
谢谢
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>我做了修改，以获得更真实的拖动体验。这需要添加 X 和 Y 偏移，这样物体看起来就按预期移动，而不是在拾取时跳跃。
let gMouseDownX = 0;
let gMouseDownY = 0;
let gMouseDownOffsetX = 0;
let gMouseDownOffsetY = 0;
function addListeners() {
document.getElementById('cursorImage').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e) {
gMouseDownX = e.clientX;
gMouseDownY = e.clientY;
var div = document.getElementById('cursorImage');
//The following block gets the X offset (the difference between where it starts and where it was clicked)
let leftPart = "";
if(!div.style.left)
leftPart+="0px"; //In case this was not defined as 0px explicitly.
else
leftPart = div.style.left;
let leftPos = leftPart.indexOf("px");
let leftNumString = leftPart.slice(0, leftPos); // Get the X value of the object.
gMouseDownOffsetX = gMouseDownX - parseInt(leftNumString,10);
//The following block gets the Y offset (the difference between where it starts and where it was clicked)
let topPart = "";
if(!div.style.top)
topPart+="0px"; //In case this was not defined as 0px explicitly.
else
topPart = div.style.top;
let topPos = topPart.indexOf("px");
let topNumString = topPart.slice(0, topPos); // Get the Y value of the object.
gMouseDownOffsetY = gMouseDownY - parseInt(topNumString,10);
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('cursorImage');
div.style.position = 'absolute';
let topAmount = e.clientY - gMouseDownOffsetY;
div.style.top = topAmount + 'px';
let leftAmount = e.clientX - gMouseDownOffsetX;
div.style.left = leftAmount + 'px';
}
addListeners();<div style="height:500px;width:500;background-color:blue;">
<img src="http://placehold.it/100x100" id="cursorImage" ondragstart="return false;"/>
</div>此代码仅适用于纯 JavaScript
function addListeners() {
document.getElementById('image').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown() {
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('image');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
addListeners();<div style="height:500px;width:500;background-color:blue;">
<img src="http://placehold.it/100x100" id="image" />
</div>使用 Jquery 的超级简单工作代码。现场演示：http://jsfiddle.net/djjL16p2/
<div id="content" style="margin-top: 100px">
<img id="lolcat" src="http://obeythekitty.com/wp-content/uploads/2015/01/lolcat_airplane.jpg" style="height: 100px; width: 120px; position: absolute;" draggable="false" />
</div>
JS：
$("#lolcat").mousedown(function() {
$(this).data("dragging", true);
});
$("#lolcat").mouseup(function() {
$(this).data("dragging", false);
});
$("#lolcat").mousemove(function(e) {
if (!$(this).data("dragging"))
return;
$(this).css("left", e.clientX - $(this).width()/2);
$(this).css("top", e.clientY - $(this).height()/2);
});
虽然这是一个老问题，但它已经被查看了很多次，并且在谷歌搜索结果中很高，所以我想我会提供这个问题的答案
dog.onpointerdown = pd;
cat.onpointerdown = pd;
document.onpointerup = ()=>document.onpointermove=null;
function pd(e){
e.preventDefault(); // <-- comment this line and drag the img
node = e.target;
mx = e.pageX;
my = e.pageY;
document.onpointermove = pm;
}
function pm(e){
dx = e.pageX-mx;
dy = e.pageY-my;
mx = e.pageX;
my = e.pageY;
x = parseInt(node.style.left)+dx;
y = parseInt(node.style.top)+dy;
node.style.left = x+'px';
node.style.top = y+'px';
}#dog,#cat {
position : absolute;
width : 30px;
height : 30px;
background : blue;
}<div id=dog style='top:50px;left:50px'></div>
<img id=cat style='top:50px;left:100px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAVtJREFUKFN10E0ow3EAxvHvb/+NaZMVzUt28FLiprycUA6SUqZGlANXNykXB8mJyEUIJ0UUeQsptMRBXg5m5W0kYYfhb9pf/9l+CgcHnvPn8DyPCIVCkr8iDOyuTmLxDGGrGkD8B8MR2OqtpsZxhVup+wWFQNeCPPvvMJmt2FIy2RlwUpl0wnK4FvGqqlIoRvw3pxg3W7FGn1FiTJwm1HF/7aUmcZ/rwnHEhfdEzo90Ygh4vpq2lwukDsGIgb0bhZw0E+b6VYR7Y1FuT/dTnBzkSY+jMdePjAgEcBmIoriWSEnPQszNTMrDlVHyMyz4vMc0laRij9VQRIT9ezNFXR40TUNo77o8XBgk72GYwMsbssWDea0BNfDIk+KgtGP9B2qavPDdok9V8GpIoqz7gLOJRs5VK3ZHNgXONj7C4e97oqY4tvpcyFgb1W1jHMz2cORTcTY0E2/P+Br5CcV6mGQ0mtQdAAAAAElFTkSuQmCC'>上面的代码有一个警告让我想到了这个问题
我试图使用鼠标移动图像
在
pde.preventDefault()浏览器似乎专门阻止拖动图像，甚至触发了
pointercancel任何人都可以解释这种行为吗