JavaScript之-拖拽

HTML部分：

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

<div class="drag" >
   <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.onload=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不支持innerWidth，可用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依然随着鼠标移动)