JavaScript 拖动drag算法

元素拖动前提条件:元素为定位元素, 个人建议position:absolute;

算法1

var left,top,x,y;
var element = document.getElementById('drag');
element.onmousedown = function(e){
      e = e || window.event;
	  left = this.offsetLeft;
	  top = this.offsetTop;
	  x =e.clientX;
	  y =e.clientY;
	  this.addEventListener('mousemove',dragMove,false);
	  this.addEventListener('mouseup',dragEnd,false);
	  return false;
};
function dragMove(e){
      e = e|| window.event;
      this.style.left = left + (e.clientX - x) + 'px';
      this.style.top = top + (e.clientY -y) +'px';
	  return false;
}
function dragEnd(e){
   	  this.removeEventListener('mousemove',dragMove,false);
	  this.removeEventListener('mouseup',dragEnd,false);
}
	

算法2

var x,y;
var element = document.getElementById('drag');
element.onmousedown = function(e){
      e = e || window.event;
	  x =e.clientX - this.offsetLeft;
	  y =e.clientY - this.offsetTop;
	  this.addEventListener('mousemove',dragMove,false);
	  this.addEventListener('mouseup',dragEnd,false);
	  return false;
};
function dragMove(e){
      e = e|| window.event;
      this.style.left = e.clientX - x + 'px';
      this.style.top = e.clientY -y +'px';
	  return false;
}
function dragEnd(e){
   	  this.removeEventListener('mousemove',dragMove,false);
	  this.removeEventListener('mouseup',dragEnd,false);
}