使用鼠标移动元素开始向上和向下捕捉

Question

我正在尝试使用mousedown, mousemove事件拖动y轴功能。公式如下：

var position = e.clientY - getOrigin(myDiv).top;
myDiv.style.transform = 'translate3d(0px, ' + position + 'px, 0px)';

function getOrigin(elm) {
    ...
    return {
        left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
        top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
    };
}

当我拖动元素时，它会快速上下跳动。为什么会发生这种情况，我该如何解决？

JSFiddle

＆＃13;

＆＃13;

var myDiv = document.getElementById('myDiv');

myDiv.addEventListener('mousedown', handleMouseDown);
window.addEventListener('mouseup', handleMouseUp);

function handleMouseDown(e) {
  window.addEventListener('mousemove', handleMouseMove);
}

function handleMouseUp(e) {
  window.removeEventListener('mousemove', handleMouseMove);
}

function handleMouseMove(e) {
  e.preventDefault();
  var position = e.clientY - getOrigin(myDiv).top;
  myDiv.style.transform = 'translate3d(0px, ' + position + 'px, 0px)';
}


function getOrigin(elm) {
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
      top: 0,
      left: 0
    },
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return {
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  };
}

＆＃13;

body {
  margin-top: 50px;
  padding-top: 50px;
}
#myDiv {
  background-color: orange;
  width: 200px;
  height: 100px;
}

＆＃13;

<div id="myDiv"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为我无法准确找出导致OP问题的原因（由于未知原因box.top在OPs脚本中每个像素移动时交替返回2个不同的值），我写了不同的完美无缺的脚本：

//document.addEventListener('DOMContentLoaded', function(){
	var myDiv = document.getElementById('myDiv');

	myDiv.addEventListener('mousedown', handleMouseDown);
	window.addEventListener('mouseup', handleMouseUp);

	function handleMouseDown(e) {
		window.addEventListener('mousemove', mouseMove.start(this, 'body',e));
	}

	function handleMouseUp(e) {
		window.removeEventListener('mousemove', mouseMove.stop('body'));
	}

	var mouseMove = function(){
		return {
			move: function(elm, posY){
				elm.style.top = posY + "px";
			},
			start: function(elm, container, e){
				e = e || window.event;
				var posY = e.clientY,
					elmTop = elm.style.top,
					elmHeight = parseInt(elm.style.height),
					conHeight = parseInt(document.getElementById(container).style.height);
				elmTop = elmTop.replace('px','');
				var diffY = posY - elmTop;

				document.onmousemove = function(e){
					e = e || window.event;
					var posY = e.clientY,
						Y = posY - diffY;
					if (Y < 0) Y = 0;
					if (Y + elmHeight > conHeight) Y = conHeight - elmHeight;
					mouseMove.move(elm,Y);
				}
			},
			stop : function(container){
				var a = document.createElement('script');
				document.onmousemove = function(){}
			},
		}
	}();
//});

#body {
	margin-top: 50px;
	position: absolute;
}
#myDiv {
	position: absolute;
	background-color: orange;
	width: 200px;
	height: 100px;
}

<div id="body">
  <div id="myDiv"></div>
</div>