js實現模態窗口的拖拽功能

一．用到的幾個基本概念：

       (1)document.body.clientWidth/clientHeight :獲得BODY對象寬度/高度       
       (2)document.documentElement.clientWidth/clientHeight:用來獲得可見區域寬度/高度。

          clientWidth/clientHeight的計算方法:

(3)offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素對象或根元素（標準模式下為 html；quirks 模式下為 body）。

offsetLeft:獲取對象相對于頁面或由 offsetParent 屬性指定的父坐標的計算左側位置

offsetTop:獲取對象相對于頁面或由 offsetTop 屬性指定的父坐標的計算頂端位置

       offsetWidth/offsetHeight計算方法：

（4）clientX/clientY ：事件屬性返回當事件被觸發時鼠標指針向對于瀏覽器頁面（當前窗口）的水平坐標/垂直坐標（不包含滾動條）。

二．拖拽的主要實現思想

     分為三步：

          （1）用戶在拖放元素上按下鼠標，拖放開始

               login.addEventListener("mousedown",drag,false);
          （2）用戶在拖放元素上移動鼠標，拖放元素在頁面中進行拖動

                 document.addEventListener("mousemove",move,false);

          （3）用戶鼠標一開拖放元素，拖放行為結束

                document.addEventListener("mouseup",up,false);

三．實現具體js代碼

window.onload = function () {

    var close = document.getElementsByClassName('close');
    var login = document.getElementById('login');
    var logins = document.getElementsByClassName('login');
    var screen = document.getElementById('dropback'); 
 
    function show(obj) {
        //獲取瀏覽器的寬和高
        var top = (document.documentElement.clientHeight - 250) / 2 - 150;
        var left = (document.documentElement.clientWidth - 300) / 2;
        //當點擊登錄按鈕時，登錄彈窗出現，遮罩層顯示
        screen.style.display = 'block'; //遮罩層顯示
        obj.style.display = 'block'; //登錄彈窗出現
        obj.style.left = left + 'px'; //登錄彈窗在屏幕中的位置
        obj.style.top = top + 'px'; 
    }
 
    function hide(obj) {
        //點擊差號時，登錄彈窗消失，遮罩層消失
        obj.style.display = 'none';
        screen.style.display = 'none';
    }

    //差號注冊點擊事件 點擊差號，彈窗消失   
    close[0].addEventListener("click", function () {
        hide(login);
    }, false);

    //登錄按鈕注冊點擊事件，點擊登錄彈出登錄彈窗
    logins[0].addEventListener("click", function () {
        show(login);
    }, false);

    //彈出框拖拽實現
    login.addEventListener("mousedown",drag,false);

    function drag(e){

        var e = e||window.event;    	
    	var _this = this; 	
    	var diffX = e.clientX - _this.offsetLeft;
    	var diffY = e.clientY - _this.offsetTop; 

    	document.addEventListener("mousemove",move,false);
    	document.addEventListener("mouseup",up,false);

    	function move(e){  

         var left = e.clientX-diffX;
         var top = e.clientY-diffY;

            if(left<0){
            	left = 0;
            }else if(left>document.documentElement.clientWidth - e.clientX){
                //沒有使用document.body.clientWidth因為此時頁面的高度只有100多，而現在要求彈窗在整個可視區中移動
            	left = document.documentElement.clientWidth - _this.offsetWidth;
            }

           if(top<0){
            	top = 0;
            }else if(top>document.documentElement.clientHeight - e.clientY){
            	top = document.documentElement.clientHeight - _this.offsetHeight;
            }

            _this.style.left = left + 'px';
            _this.style.top = top + 'px';
    }

    function up(){

    	    document.removeEventListener("mousemove",move,false);
    		document.removeEventListener("mouseup",up,false);
    }

    }
   
    
 
}

四．實現效果圖,隨著鼠標的拖拽，彈窗會在整個可視區進行移動