使用鼠标事件通过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);

}

我并不要求完整的答案，但请问有人可以指导我如何使用鼠标移动事件来拖动屏幕上的图片吗？

谢谢。

- bcBorn

---

#dogPic和#catPic是否具有position: absolute;样式？ - Sergio

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>

- Endless

---

谢谢你，Endless。我知道这很简单，但由于某种原因一直在走错方向。这就是我试图尝试的内容。 - bcBorn

吹毛求疵：moving 不应该是一个全局变量；最好将 moving 存储为元素的 data-moving 或类似属性。 - apscience

Answer 2

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

- Trevor Agnitti

Answer 3

这段代码只需要纯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>

- stalin

Answer 4

虽然这是一个老问题，但它已经被浏览了很多次，并且在谷歌搜索结果中排名很高，所以我想为这个问题提供一个答案。

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;
  border        : 1px solid 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'>

上述代码有一个要注意的地方，这引发了我的问题

我试图使用鼠标移动一张图片

在 pd 函数中，如果注释掉 e.preventDefault()，则无法再拖动图片，尽管 div 没有问题，在桌面版的 Chrome 和 Firefox 中测试过

似乎浏览器特别禁止拖动图片，甚至会触发 pointercancel 事件

有人能解释一下这种行为吗？

- matt richards

Answer 5

使用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);
});

- apscience

---

我认为假设他在使用jQuery或者应该使用它是错误的。这个人用原生JavaScript完成了所有工作，因此应该以此回答。 - Endless

@Endless：我完全同意你的观点。我的回答意图是为OP提供一个可行的方法。我相信他有能力将其移植到Vanilla JS，只是会更加冗长。 - apscience

抱歉，我应该声明我不能使用jQuery来完成这个。不过还是谢谢你的回答。 - bcBorn

除非不想使用jqueryui，否则没有必要编写所有这样的代码。对于后者，您只需要一行代码：$('#lolcat').draggable(); - Antonio Bonifati 'Farmboy'