这应该很简单,但每次尝试我都会遇到不同的问题。
我正在尝试使用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 :(得分:3)
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>
答案 1 :(得分:1)
我进行了修改,以具有更逼真的拖动体验。这需要添加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>
答案 2 :(得分:0)
使用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);
});
答案 3 :(得分:0)
此代码仅使用简单的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>