使用普通JavaScript拖放图像'；工作不好

我已经为我的图像实现了一个拖动功能，该功能可以将图像向您拖动图像的任何方向移动。我我不确定它出了什么问题，如果它太慢，需要节流，如果我的数学出了问题，或者我只是做错了什么。我举了一个简单可行的例子。任何帮助都将不胜感激

HTML JS

---

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

• 首先，DOM访问必须通过

  requestAnimationFrame（）

  完成。然后我必须重构代码以获得更好的性能。移动DOM对象最好通过CSS3

  transform:translate（x，y）

• 然后我不得不进一步重构代码。我稍微修改了一下语义。为了移动图像元素，我们将“仅”改变

  变换：translate（x，y）CSS属性。所以我们只需要这个CSS属性的初始值。由于您已选择通过执行
  left:50%将过大的图像水平居中
  （首先将图像向右上移动，直到其左边缘位于包含div的一半宽度），然后
  变换：translateX（-50%）
  （将图像向左移动到其宽度的一半）我们可以很容易地看到我们的
  translateX
  值是图像宽度的一半（-50%）。
  translateY
  值从未被修改，因此它保持为0。我已将此属性更改为
  transform:translate（-50%，0）以确保一致性。现在，让我们计算
  translate（x，y）
  的初始
  x
  值。
  image.getBoundingClientRect（）
  工具对于以整数形式获取
  image
  元素的宽度非常有用

因此，请参阅下面的代码片段。这是不言自明的

也在JSBin和CodePen

var image=document.getElementsByClassName（'my-img'）[0]，
imgCntnrs=document.getElementsByClassName（'img-cntnr'），
DragimouseStart={}，
lastDiff={x:0，y:0}，
initialPos=image.getBoundingClientRect（），
currentPos={x:-initialPos.width/2，y:0}；
功能鼠标向下拖动（e）{
e、 预防默认值（）；
DragimouseStart.x=e.clientX；
dragImgMouseStart.y=e.clientY；
currentPos.x+=lastDiff.x；
当前位置y+=最后的差异y；
lastDiff={x:0，y:0}；
window.addEventListener（'mousemove'，mousemoveDragImg）；
window.addEventListener（'mouseup'，mouseupDragImg）；
requestAnimationFrame（函数（）{
image.style.transform=“translate”（+（currentPos.x+lastDiff.x）+“px”，+（currentPos.y+lastDiff.y）+“px”）；
});
}
函数mousemoveDragImg（e）{
e、 预防默认值（）；
lastDiff.x=e.clientX-dragImgMouseStart.x；
lastDiff.y=e.clientY-dragImgMouseStart.y；
requestAnimationFrame（函数（）{
image.style.transform=“translate”（+（currentPos.x+lastDiff.x）+“px”，+（currentPos.y+lastDiff.y）+“px”）；
});
}
函数mouseupDragImg（e）{
e、 预防默认值（）；
removeEventListener（'mousemove'，mousemoveDragImg'）；
window.removeEventListener（'mouseup'，mouseupDragImg）；
}
image.addEventListener（'mousedown'，mousedowndragim）
.img cntnr{
位置：相对位置；
边框：道奇蓝纯色10px；
边界半径：10px；
宽度：250px；
高度：250px；
溢出：隐藏；
保证金：0；
填充：0；
}
.img cntnr img{
位置：绝对位置；
左：50%；
转换：转换（-50%，0）；
顶部：0px；
底部：0px；
保证金：自动；
填充：0；
光标：-webkit抓取；
}

JS-Bin
一个写得很好的答案范例。
<div class="img-cntnr">
  <img class="my-img" src="http://www.fillmurray.com/g/900/900" alt="" />
</div>

.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;
}

  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);