Jquery前端封装之一个块在整个浏览器的拖拽

在学习jquery的时候，我们会为了界面美化的问题感到苦恼，设置有时候，因为一些小功能而头疼，一步步实现拖拽功能，下面的login是自己定义的一个块。

下面这段代码只能实现点一下后的拖拽，并不能在整个浏览器里面的拖拽。

var oDiv=document.getElementById('login');
    oDiv.onmousedown=function(e){
        var e=e||window.event;
        var diffX=e.clientX-oDiv.offsetLeft;
        var diffY=e.clientY-oDiv.offsetTop;
        oDiv.onmousemove=function(e){
            var e=e||window.event;
            oDiv.style.left=e.clientX-diffX+'px';
            oDiv.style.top=e.clientY-diffY+'px';
        };
        oDiv.onmouseup=function(){
            oDiv.onmousemove=null;
            oDiv.onmouseup=null;
        };
        
    };

下面这段代码只能实现点一下后的拖拽，能在整个浏览器里面的拖拽。

var oDiv=document.getElementById('login');
    oDiv.onmousedown=function(e){
        var e=e||window.event;
        var diffX=e.clientX-oDiv.offsetLeft;
        var diffY=e.clientY-oDiv.offsetTop;
        document.onmousemove=function(e){
            var e=e||window.event;
            oDiv.style.left=e.clientX-diffX+'px';
            oDiv.style.top=e.clientY-diffY+'px';
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
    };

在拖拽过程中，我们会遇见白边的问题，这个问题上，我们在实现遮障的时候，在其里面写上这段代码即可

document.documentElement.style.overflow='hidden';

在解除遮障时

document.documentElement.style.overflow='auto';