鼠标拖拽效果以及限定拖拽范围

点击 页面效果

css样式

*{padding: 0;margin: 0;}
.login-box{position:absolute;width: 380px;height:auto;border:1px solid #ccc;background: #fff;z-index: 8001;display: none;}
.login-box .title{border-bottom:1px solid #ccc;line-height: 28px;text-align: center;cursor:move;}
.login-box span{display: block;line-height: 28px;float:right;padding-right: 10px;font-size: 20px;cursor:pointer;}
.login-box .box{height:280px;}
.login-but{text-align: right;padding-right: 20px;line-height: 38px;font-size: 16px;}
.mask{width: 100%;height:100%;background: #000;opacity: .4;filter:Alpha(opacity=40);position:absolute;left:0;top:0;z-index: 8000;display: none;}

html元素

<div class="login-box" id='login-box'>
    <div class="title" id='loginTitle'>登录<span onclick='hideLogin()'>x</span></div>
    <div class="box"></div>
</div>
<div class="login-but"><a href="javascript:showLogin();">登录</a></div>
<div class="mask" id='mask' onselectart='return false'></div>

js

//获取元素对象
function an(id){return document.getElementById(id);}
var login = an('login-box');//获取登录浮层
var mask = an('mask');//获取遮罩元素

// //自动居中 - 登录浮层
function autoCenter(el){
    var bodyW = document.documentElement.clientWidth;//获取整个网页的宽度
    var bodyH = document.documentElement.clientHeight;//获取整个网页的高度

    //1.offsetHeight属性可以返回对象的padding + border + Height属性值之和，style.Height返回值就是定义的Height属性值。
    //2.offsetHeight属性仅是可读属性，而style.Height是可读写的。
    var elW = el.offsetWidth;//获取元素的宽度
    var elH = el.offsetHeight;//获取元素的高度

    el.style.left = (bodyW - elW) / 2 + 'px';//设置元素的left距离
    el.style.top = (bodyH - elH) / 2 + 'px';//设置元素的top距离
}

//自动全屏 - 遮罩
function fillToBody(el){
    el.style.width = document.documentElement.clientWidth + 'px';
    el.style.height = document.documentElement.clientHeight + 'px';
}

var mouseOffsetX = 0;//鼠标偏移位置
var mouseOffsetY = 0;
var isDown = false;//标记是否点击按住状态

//标题栏上按住
an('loginTitle').onmousedown = function(e){
    var e = e||window.event;
    //获取鼠标偏移位置，鼠标按下去的位置减去登录浮层距离页面左边距的距离
    mouseOffsetX = e.pageX - an('login-box').offsetLeft;
    mouseOffsetY = e.pageY - an('login-box').offsetTop;
    isDown = true;
}

//移动
document.onmousemove = function(e){
    var e = e || window.event;

    if(isDown === true){

        var moveX = e.pageX - mouseOffsetX;
        var moveY = e.pageY - mouseOffsetY;

        //范围限定，移动范围left不能小于0 且 left不能大于 （页面最大可视宽度 - 浮层自身宽度）
        //         移动范围top不能小于0 且 top不能大于 （页面最大可视高度 - 浮层自身高度）

        //获取页面可视宽高
        var pageW = document.documentElement.clientWidth;
        var pageH = document.documentElement.clientHeight;

        //获取浮层宽高
        var elW = an('login-box').offsetWidth;
        var elH = an('login-box').offsetHeight;

        //计算可以移动的最大值
        var maxX = pageW - elW;//页面宽度减去浮层宽度
        var maxY = pageH - elH;//页面高度减去浮层高度

        //Math.Max(0,moveX),传入两个值，返回最大的一个
        //Math.min(maxX,Max(0,moveX)),传入两个值，返回最小的一个
        moveX = Math.min(maxX, Math.max(0, moveX));
        moveY = Math.min(maxY, Math.max(0, moveY));

        //鼠标当前位置减去鼠标偏移位置等于新位置
        an('login-box').style.left = moveX + 'px';
        an('login-box').style.top = moveY + 'px';
    }  
}

//弹起
document.onmouseup = function(){
    isDown = false;//将鼠标按住状态置为 不可移动状态
}

//窗口改变的时候 自动全屏+自动居中
window.onresize = function(){
    autoCenter(login);
    fillToBody(mask);
}

//点击登录，显示浮层+遮罩
function showLogin() {
    login.style.display = 'block';
    mask.style.display = 'block';
    autoCenter(login);
    fillToBody(mask);
}

//点击 关闭遮罩以及浮动层
function hideLogin() {
    login.style.display = 'none';
    mask.style.display = 'none';
}

上一篇：PHP常用的几种页面的跳转，以及JS跳转

下一篇：JavaScript写入cookie——工具函数