原生js实现拖拽效果

window.οnlοad=function(){
            var login=document.getElementById('login');    //获取包裹图片的id

//在触发鼠标按下事件后在触发鼠标移动事件，最后触发鼠标松开的事件
            login.οnmοusedοwn=function(e){       //鼠标按下登录框区域时触发
                var e=e||window.event;      //兼容ie和firefox

//获取鼠标在图片中的位置，到时图片移动的位置为鼠标相对于页面的y和x轴的距离减去在图片内的距离，clientX，clientY分别为鼠标相对于页面的y和x轴的位置，offsetLeft和offsetTop是图片相对于页面的y和x轴的位置
                var diffX=e.clientX-login.offsetLeft;   //鼠标坐标值-登录框到左端的距离=鼠标到弹框左边的距离,下边同理
                var diffY=e.clientY-login.offsetTop;    
                if(diffX>0&&diffY>0){
                    document.οnmοusemοve=function(e){     //触发鼠标移动事件
                        login.style.left=e.clientX-diffX 'px';    //不断移动过程中，鼠标坐标值-鼠标到弹框左边的距离即登录框到页面的左边距离不断更新，实现拖拽效果
                        login.style.top=e.clientY-diffY 'px';

                        var cw=document.documentElement.clientWidth||document.body.clientWidth;   //兼容ie和firefox，获取网页可视区域宽、高
                        var ch=document.documentElement.clientHeight||document.body.clientHeight;
                        if(e.clientX-diffX<0){   //看下图3情形，判断已出左边界
                            login.style.left='0px';   //出界都重置为0px
                        }else if(e.clientX-diffX>cw-login.offsetWidth){   //看下图2情形，判断已出右边界
                            login.style.left=cw-login.offsetWidth 'px';   //重置为左边最大值
                        }
                        if(e.clientY-diffY<0){   //与上同理
                            login.style.top='0px';
                        }else if(e.clientY>ch-login.offsetHeight){
                            login.style.top=ch-login.offsetHeight 'px';
                        }
                    }
                }    
                document.οnmοuseup=function(){    //鼠标抬起时，鼠标按下与移动事件为null
                    document.οnmοusemοve=null;
                    document.οnmοuseup=null;
                }
            }
        }