鼠标拖拽和遮罩的实现

function g(id){
    return document.getElmentById(id);
}

function autoCenter(el){ 
    var bodyW = document.documentElement.clientWidth;
    var bodyH = document.documentElement.clientHeight;
    
    var elW = el.offsetWidth;
    var elH = el.offsetHeight;
    
    el.style.left = (bodyW - elW)/2+'px';
    el.style.left = (bodyW - elW)/2+'px';
}

function fillToBody(el){
    el.style.width = document.documentElement.clientWidth +'px';
    el.style.height = document.documentElement.clientHeight +'px';
}

g('dialogTitle').addEventListener('mousedown',function(e){
   var e = e || window.event;
   mouseOffsetX = e.pageX - g('dialog').offsetLeft;
   mouseOffsetY = e.pageY - g('dialog').offsetTop;
   isDraging = true;
});

document.onmousemove = function(e){
    var e = e || window.event;
    var mouseX = e.pageX;
    var mouseY = e.pageY;
    var moveX = 0;
    var moveY = 0;
    if(isDraging === true){
        moveX = mouseX - mouseOffsetX;
        moveY = mouseY - mouseOffsetY;
        //碰撞检测
        var pageWidth = document.documentElement.clientWidth;
        var pageHeight = document.documentElement.clientHeight;
        var dialogWidth = g('dialog').offsetWidth;
        var dialogHeight = g('dialog').offsetHeight;
        var maxX = pageWidth - dialogWidth;
        var maxY = pageHeight - dialogHeight;
        mouseX = Math.min(maxX, Math.max(0,moveX));
        mouseY = Math.min(maxY, Math.max(0,moveY));
        g('dialog').style.left = mouseX +'px';
        g('dialog').style.top = mouseY +'px';
    }
}

document.onmouseup = function(){
    isDraging = false; 
}