2018-08-08

<script>
    var loginbutton = document.getElementById("login");
    var login_box = document.getElementById("login_box");
    var mask = document.getElementById("mask");
    var close_button = document.getElementById("close");
    function prepare(){
        //打开登陆框
        loginbutton.onclick = function(){
            
            login_box.style.display = "block";
            mask.style.display = "block";
            autocenter();
        }
        //关闭登陆框
        close_button.onclick = function(){  
            login_box.style.display = "none";
            mask.style.display = "none";
        }
    }

    var mouseOffsetX = 0;
    var mouseOffsetY = 0;
    var drag = false;
    var box_title = document.getElementById("box_title");
    box_title.addEventListener("mousedown",function(e){
        e = e||window.event;
        drag = true;
        mouseOffsetX = e.pageX - login_box.offsetLeft;
        mouseOffsetY = e.pageY - login_box.offsetTop;
    }) 
    document.onmousemove = function(e){
        e = e||window.event;
        var newX = 0;
        var newY = 0;
        if(drag){
            newX = e.pageX - mouseOffsetX;
            newY = e.pageY - mouseOffsetY;
            if(newX<0)  newX = 0;
            if(newY<0)  newY = 0;
            if(newX>document.documentElement.clientWidth-login_box.offsetWidth)  newX = document.documentElement.clientWidth-login_box.offsetWidth;
            if(newY>document.documentElement.clientHeight-login_box.offsetHeight)  newY = document.documentElement.clientHeight-login_box.offsetHeight;
            
            login_box.style.left = newX+"px";
            login_box.style.top = newY+"px";
        }
        
        return false;
    }
    box_title.onmouseup = function(e){
        drag = false;
    }
    /*
    这里将移动事件代理到document上是因为你的移动过程是在document上进行的，使用document即不会因为移动过快丢失事件，
    也可以更方便得到鼠标的准确位置。但是按下和抬起的事件由应该做到div里，因为你的需求是按下div才进行移动，
    不是随便在document的任意位置按下也可以移动
    */
    function autocenter(){
        login_box.style.left = (document.documentElement.offsetWidth-login_box.offsetWidth)/2+"px";
        login_box.style.top = (document.documentElement.offsetHeight-login_box.offsetHeight)/2+"px";
    }
    window.onload = function(){
        prepare();
    }
    
    
</script>