在网页开发的过程中我们经常会接触到拖拽事件，虽然每个网页和每个网页的拖拽的效果大相径庭，但是从根本来讲，代码是几乎一模一样的。
  简而言之，拖拽效果就是鼠标按下，被拖拽的元素随着鼠标而移动，鼠标松开，被拖拽的元素停止拖拽。所以，我们需要使用onmousedown和onmouseup两个事件。
  在鼠标按下的时候，我们需要先获取鼠标当前点击事件距离元素左侧和顶端的距离(needX,needY)。

			var needX = event.clientX - this.offsetLeft;var needY = event.clientY - this.offsetTop;

  但是当我们拖拽元素的时候，我们需要让元素的left和top两个属性随着改变，元素的left属性即鼠标点击事件的位置减去鼠标事件距离元素左端的距离。即：

			document.onmousemove = function(){div.style.left = event.clientX - needX + 'px';div.style.top  = event.clientY - needY + 'px';};

  同时，当我们鼠标抬起的时候，我们需要清空onmousedown和onmouseup两个事件，防止对之后的操作进行干扰。

			document.onmouseup = function(){this.onmousemove = this.onmouseup = null;};

所以，综上，拖拽效果合代码如下

div.onmousedown = function(){var needX = event.clientX - this.offsetLeft;var needY = event.clientY - this.offsetTop;document.onmousemove = function(){div.style.left = event.clientX - needX + 'px';div.style.top  = event.clientY - needY + 'px';};document.onmouseup = function(){this.onmousemove = this.onmouseup = null;};return false;};

优化版本：

document.documentElement.onmousedown = function(){if(event.srcElement.getAttribute('drag') == 'drag'){var _this = event.srcElement||event.target;var needX = event.clientX - _this.offsetLeft;var needY = event.clientY - _this.offsetTop;document.onmousemove = function(){_this.style.left = event.clientX - needX + 'px';_this.style.top  = event.clientY - needY + 'px';};document.onmouseup = function(){this.onmousemove = this.onmouseup = null;};return false;};};

该版本是给要拖拽的元素添加了一个drag属性，当点击元素的时候，会检查该元素是否有这个属性，如果有，则进行拖拽。