JavaScript之-拖拽

HTML部分：

<div class="drag">
</div>

<div class="drag" style="left:100px;top:100px;">
   <h5>点击标题拖动</h5>
</div>

CSS部分：

<style type="text/css">
*{margin:0;padding:0;}
.drag{ width:100px; height:100px; background:#000; position:absolute; color:#fff;}
.drag h5{background:blue;}
</style>

HTML和CSS部分比较简单易懂，这里就不多阐述了

JS部分：

window.οnlοad=function(){

    var obj1 = document.getElementsByTagName("div")[0];
	darg( obj1 );

	var obj2 = document.getElementsByTagName("div")[1];
	darg( obj2 , obj2.getElementsByTagName("h5")[0] );
	

	//拖拽函数
	function darg( obj ,handler){   //obj： 移动的对象 ， handler：拖拽的部位
	   var handler = handler || obj ;  //handler 没传入的话，就取obj
	   this.style.cursor = "move";

	   handler.onmousedown = function(event){	         
	         var event = event || window.event ;  //兼容IE
             
			 var disX = event.clientX - obj.offsetLeft;   //鼠标距obj左边框的距离
			 var disY = event.clientY - obj.offsetTop;   //鼠标距obj上边框的距离

			 //计算窗口最大值
			 //IE不支持innerHTML，可用document.documentElement.clientWidth代替
			 var maxLeft = ( window.innerWidth || document.documentElement.clientWidth ) - obj.offsetWidth; 
			 var maxTop = ( window.innerHeight || document.documentElement.clientHeight ) - obj.offsetHeight;
			 
			 document.onmousemove = function(event){
			      var event = event || window.event ;

				  var	curLeft = event.clientX - disX; 
				  var curTop = event.clientY - disY;
                  
				  curLeft < 0 && ( curLeft=0 ); //&& 运算 ， 相当于 if(curLeft<0){ curLeft=0 }
				  curTop < 0 && ( curTop=0 );
				 
				  curLeft > maxLeft && ( curLeft = maxLeft );
				  curTop > maxTop && ( curTop = maxTop );

				  obj.style.left = curLeft + "px";
				  obj.style.top = curTop + "px";
				  return false;
			 }

			 document.onmouseup = function(){
			     document.onmousemove = null;  //设为 null 是为防止内存泄露
				 document.onmousedown = null;
				 this.releaseCapture && this.releaseCapture(); //释放鼠标捕获
			 } 
             this.setCapture && this.setCapture();  //鼠标捕获 (注1)
			 return false;
	   }
	}
}

注1：
  鼠标捕获：鼠标所有事件都针对该对象，即使鼠标不在浏览器窗口内。
  (鼠标移出窗口试试，div依然随着鼠标移动)