在中已经实现了对弹窗组件的封装，现在我们想要在浏览器窗口内可以对弹窗进行拖拽移动，就需要封装拖拽事件。

拖拽的原理

首先我们需要了解拖拽的原理，大致分为如下几个步骤：

1. 将鼠标移动到需要拖拽的物体上，按下鼠标，触发onmousedown事件；

2. 按住鼠标的同时，选中物体，并进行拖动，触发onmousemove事件；

3. 放开鼠标，停止拖动，物体会停留在最后的位置，触发onmouseup事件；

4. 再次按下鼠标，会重复循环以上操作。

注意：onmousedown按下事件只在物体对象范围内起作用，此处指定对象为窗体loginBox即可;

拖拽事件封装

在base.js中封装drag()拖拽事件，代码如下：

Base.prototype.drag = function(){    for (var i=0;i
    
      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();};