完美拖拽

实现拖拽其实很简单

1.首先绑定事件，一般应该是鼠标移入事件  onmouseover

2.然后获取鼠标移入后距离父元素的左，上边距，e.offsetLeft和e.offsetTop

3.然后绑定鼠标移动事件 onmousemove,计算出 鼠标距离浏览器左边，上边的距离 e.pageX和e.pageY

然后计算出可移动的范围就可以，记得做边界处理

<script type="text/javascript">
	var box = document.getElementById("box");
	box.onmousedown = function(e){
		var e = e || event;
		var x = e.offsetX;
		var y = e.offsetY;
		document.onmousemove = function(e){
			var e = e || event;
			var l = e.pageX - x;
			var t = e.pageY - y;
			//做一个边界处理
			
			/*if(l < 0){
				l = 0;
			}else if(l > document.documentElement.clientWidth - 200){
				l = document.documentElement.clientWidth - 200;
			}
			if(t < 0){
				t = 0;
			}else if(t >  document.documentElement.clientHeight - 200){
				t = document.documentElement.clientHeight - 200;
			}*/
			var lNum = document.documentElement.clientWidth - 200;
			var tNum = document.documentElement.clientHeight - 200;
			l = l < 0 ? 0 : (l > lNum ? lNum : l);
			t = t < 0 ? 0 : (t > tNum ? tNum : t);
			box.style.left = l + "px";
			box.style.top = t + "px";
		}
		document.onmouseup = function(){
			document.onmousemove = null;
		}
		return false;
	}
	

 简单的完美拖拽就这样，其实还可以深入，由这个做出淘宝的放大镜效果