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';



你可能感兴趣的:(Jquery前端封装之一个块在整个浏览器的拖拽)