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