利用js实现拖拽效果

想做鼠标拖拽效果，首先得先了解一些鼠标事件。

大家应该都知道，鼠标上有很多事件，而我们这里做的鼠标拖拽效果，只需用到三个鼠标事件：

1. onmousedown按下鼠标时触发
  2.onmousemove 鼠标经过时触发
  3.onmouseup   按下鼠标松开鼠标时触发 

当然我们还要了解：

offsetWidth： 元素相对父元素的偏移宽度（widht+padding+borde）

offsetHeight：元素相对父元素的偏移高度（height + padding + border）

offsetLeft：表示该元素到最近定位父级x方向上的偏移量

offsetTop： 表示该元素到最近定位父级的y方向上的偏移量

  clientHeight：内容可视区域的高度

  clientWidth：内容可视区域的宽度

js实现的效果原理：

当鼠标移动左键点下去移动时，被选中的元素会跟着鼠标的移动而移动，而x,y坐标也会随着鼠标的移动而发生改变；元素移动的也就是left和top值的改变。

html代码：

<div id="wrap"></div>

  css代码：

#wrap{
    position: absolute;
    left:0;
    top:0;
    width: 400;
    height: 400px;
    background: red;
}

  js代码

var wrap = document.getElementById("wrap");
//垂直居中
wrap.style.left = (document.documentElement.clientWidth - wrap.offsetWidth)/2 + "px";
wrap.style.top = (document.documentElement.clientHeight - wrap.offsetHeight)/2 + "px";
wrap.onmousedown = function(e){
	//event是一个事件对象，一个全局对象
	var event = e || window.event;
	var oW =event.clientX - wrap.offsetLeft;//鼠标的坐标值-wrap的偏移量
	var oH = event.clientY - wrap.offsetTop;
	document.onmousemove = function(e){
		var event = e || window.event;
		var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
		var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
		var bLeft = event.clientX - oW;
		var bTop = event.clientY - oH;
		
		if(bLeft < scrollX){
			bLeft = scrollX;
		}
		else if(bLeft > document.documentElement.clientWidth - wrap.offsetWidth +scrollX){
			bLeft = document.documentElement.clientWidth - wrap.offsetWidth +scrollX;
		}
		if(bTop < scrollY){
			bTop = scrollY;
		}
		else if(bTop > document.documentElement.clientHeight - wrap.offsetHeight +scrollY){
				bTop = document.documentElement.clientHeight - wrap.offsetHeight +scrollY;					
		}
		wrap.style.left = bLeft + "px";
		wrap.style.top = bTop + "px";
	}
}
document.onmouseup = function(){
	document.onmousemove = null;
}