在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();
};