JS實現博客前端頁面（五） —— 封裝彈窗拖拽事件

在JS實現博客前端頁面（四）中已經實現了對彈窗組件的封裝，如今咱們想要在瀏覽器窗口內能夠對彈窗進行拖拽移動，就須要封裝拖拽事件。

拖拽的原理

首先咱們須要瞭解拖拽的原理，大體分爲以下幾個步驟：

1. 將鼠標移動到須要拖拽的物體上，按下鼠標，觸發onmousedown事件；

2. 按住鼠標的同時，選中物體，並進行拖動，觸發onmousemove事件；

3. 放開鼠標，中止拖動，物體會停留在最後的位置，觸發onmouseup事件；

4. 再次按下鼠標，會重複循環以上操做。

注意：onmousedown按下事件只在物體對象範圍內起做用，此處指定對象爲窗體loginBox便可;
但窗體的onmousemove、onmouseup事件則需在整個頁面文檔範圍內起做用，應該指定對象爲document.

拖拽事件封裝

在base.js中封裝drag()拖拽事件，代碼以下：

Base.prototype.drag = function(){
    for (var i=0;i<this.elements.length;i++){
        var element = this.elements[i];
        //鼠標按下事件 
        element.onmousedown = function(e){
             var e= e|| window.event;
             var that = this;//這裏的this指向element對象
             
             //獲取鼠標點擊位置相對於窗體left和top的位移
             var diffX = e.clientX - that.offsetLeft;
             var diffY = e.clientY - that.offsetTop;
             
             //鼠標移動事件
             document.onmousemove = function(e){
                 var e = e||window.event;
                 //在移動過程當中窗體的offsetLeft、offsetTop會隨着事件觸發位置的e.clientX、e.clientY變化而變化，但diffX、diffY是固定不變的
                 //故使用e.clientX - diffX能夠獲取移動後窗體的left值，top值同理
                 var left = e.clientX - diffX ;
                 var top = e.clientY - diffY;
                 
                 //設置移動的位置不得超過瀏覽器的邊緣
                 //使用offsetWidth、offsetHeight能夠得到窗體自身的寬度、高度
                 //窗體距左的偏移量加上窗體自身的寬度不超過瀏覽器的寬度
                 if(left < 0){
                     left = 0;
                 }else if(left > window.InnerWidth - that.offsetWidth){
                     left = window.InnerWidth - that.offsetWidth;
                 } 
                //窗體距上的偏移量加上窗體自身的高度不超過瀏覽器的高度
                 if(top < 0){
                     top = 0;
                 }else if(top > window.InnerHeight - that.offsetHeight){
                     top = window.InnerHeight - that.offsetHeight;
                 }
                //設置窗體移動後的偏移量
                 that.style.left = left + 'px';
                 that.style.top = top + 'px'; 
             }
             
             //鼠標放開事件
             document.onmouseup = function(){
                 //清空事件
                 this.onmousemove = null;//這裏的this指向document對象
                 this.onmouseup = null;

             } 
        
         };
    }
    return this;
}

前臺調用

window.onload = function () { 
    var loginBox=$().getId("loginBox");//獲取窗體
     //拖拽窗體
     loginBox.drag();
};