javascript - 使用纯 JavaScript 拖动和移动图像效果不佳

Question

我已经为我的图像实现了拖动功能，无论您拖动图像的方向如何移动图像。我不确定它有什么问题，如果它很慢并且需要节流，如果我的数学不对，或者我只是简单地做错了什么。我做了一个最小可行的例子。非常感谢任何帮助。

Here's a codepen.

HTML

<div class="img-cntnr">
  <img class="my-img" src="http://www.fillmurray.com/g/900/900" alt="" />
</div>

CSS

.img-cntnr {
  position: relative;
  border: dodgerBlue solid 20px;
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.img-cntnr img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: -webkit-grab;
}

JS

  var images = document.getElementsByClassName('my-img');
  var imgCntnrs = document.getElementsByClassName('img-cntnr');
  var dragImgMouseStart = {};
  var imgCntnrH;
  var imgCntnrW;

  function mousedownDragImg(e) {
    dragImgMouseStart.x = e.pageX;
    dragImgMouseStart.y = e.pageY;
    imgCntnrH = imgCntnrs[0].offsetHeight;
    imgCntnrW = imgCntnrs[0].offsetWidth;

    // add listeners for mousemove, mouseup
    window.addEventListener('mousemove', mousemoveDragImg);
    window.addEventListener('mouseup', mouseupDragImg);
  }

  function mousemoveDragImg(e) {
    var diffX = -1 * (dragImgMouseStart.x - e.pageX);
    var diffY = -1 * (dragImgMouseStart.y - e.pageY);
    var oldLeft = isNaN(parseFloat(images[0].style.left)) ? 0 : parseFloat(images[0].style.left);
    var newLeft = oldLeft + diffX / imgCntnrW;
    images[0].style.left = newLeft + '%';
    var oldTop = isNaN(parseFloat(images[0].style.top)) ? 0 : parseFloat(images[0].style.top);
    var newTop = oldTop + diffY / imgCntnrH;
    images[0].style.top = newTop + '%';
    console.log(newLeft, newTop);
  }

  function mouseupDragImg(e) {
    window.removeEventListener('mousemove', mousemoveDragImg);
    window.removeEventListener('mouseup', mouseupDragImg);
  }

  for (var i = images.length - 1; i >= 0; i--) {
    // make images unselectable
    images[i].ondragstart = function() {
      return false;
    };
  };

  images[0].addEventListener('mousedown', mousedownDragImg);

Answer 1

您的代码中需要进行一些更正。

• 首先，所有 DOM 访问都必须通过 requestAnimationFrame() 完成。然后我不得不重构代码以获得更好的性能。移动 DOM 对象最好使用 CSS3 transform: translate(x,y);
• 然后我不得不进一步重构代码。我稍微修改了语义。为了移动图像元素，我们将“仅”在移动鼠标时更改 transform: translate(x,y); CSS 属性。所以我们只需要这个 CSS 属性的初始值。由于您选择通过执行 left: 50%; 将超大图像水平居中(首先将图像向右移动直到它的左边缘位于包含 div 的半宽度处)然后 transform: translateX(-50%);(将图像向左移动其宽度的一半)我们可以很容易地看到我们的 translateX 值是图像宽度的一半(-50%)。 translateY 值从未被修改，因此它保持为 0。为了保持一致性，我已将此属性更改为 transform: translate(-50%, 0);。那么，现在让我们计算 translate(x,y) 的初始 x 值。 image.getBoundingClientRect() 工具对于获取 image 元素的整数宽度非常有用。

因此，请参阅下面的片段以了解其余部分。这是不言自明的。

也在 JSBin 和 CodePen 上

https://jsbin.com/bawalebowi/1/edit?css,js,output

http://codepen.io/omerillo/pen/EKWOZQ

  var         image = document.getElementsByClassName('my-img')[0],
          imgCntnrs = document.getElementsByClassName('img-cntnr'),
  dragImgMouseStart = {},
           lastDiff = {x:0, y:0},
         initialPos = image.getBoundingClientRect(),
         currentPos = {x: -initialPos.width/2, y: 0};

  function mousedownDragImg(e) {
    e.preventDefault();
    dragImgMouseStart.x = e.clientX;
    dragImgMouseStart.y = e.clientY;
          currentPos.x += lastDiff.x;
          currentPos.y += lastDiff.y;
               lastDiff = {x: 0, y: 0};
    window.addEventListener('mousemove', mousemoveDragImg);
    window.addEventListener('mouseup', mouseupDragImg);
    requestAnimationFrame(function(){
                            image.style.transform = "translate(" + (currentPos.x + lastDiff.x) + "px," + (currentPos.y + lastDiff.y) + "px)";
                          });
  }

  function mousemoveDragImg(e) {
    e.preventDefault();
    lastDiff.x = e.clientX - dragImgMouseStart.x;
    lastDiff.y = e.clientY - dragImgMouseStart.y;
    requestAnimationFrame(function(){
                            image.style.transform = "translate(" + (currentPos.x + lastDiff.x) + "px," + (currentPos.y + lastDiff.y) + "px)";
                          });
  }

  function mouseupDragImg(e) {
    e.preventDefault();
    window.removeEventListener('mousemove', mousemoveDragImg);
    window.removeEventListener('mouseup', mouseupDragImg);
  }

  image.addEventListener('mousedown', mousedownDragImg);

.img-cntnr {
  position: relative;
  border: dodgerBlue solid 10px;
  border-radius: 10px;
  width: 250px;
  height: 250px;
  overflow: hidden;
  margin: 0;
  padding:0;
}

.img-cntnr img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: 0px;
  bottom:0px;
  margin: auto;
  padding: 0;
  cursor: -webkit-grab;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="img-cntnr">
  <img class="my-img" src="http://www.fillmurray.com/g/900/900" alt="" />
</div>
</body>
</html>