使用鼠标事件移动 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

超级简单的工作代码 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);
});

Answer 2

此代码仅适用于普通 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>

Answer 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>

Answer 4

我做了修改以获得更真实的拖动体验。这需要添加 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 的图像

Move an image with Javascript using mouse events

html

javascript

events

mouseevent