您好,欢迎访问一九零五行业门户网

javascript完美拖拽的实现方法_javascript技巧

html代码:
复制代码 代码如下:
网站登录
用户名:
密 码:
css代码:
复制代码 代码如下:
body, h2 {
    margin:0;
    padding:0;
}
#login {
    width:350px;
    height:250px;
    border:1px solid #ccc;
    position:absolute;
    left:512px;
    top:300px;
}
#login h2 {
    font-size:14px;
    text-align:center;
    height:30px;
    line-height:30px;
    background:#f60;
    color:white;
    cursor:move;
    margin-bottom:30px;
    letter-spacing:1px;
}
#login .user, #login .pass {
    text-align:center;
    font-size:12px;
    height:60px;
    line-height:40px;
}
#login .txt {
    width:200px;
    border:1px solid #ccc;
    background:#fff;
    height:30px;
    line-height:30px;
}
#login .submit {
    text-align:right;
}
#login .button {
    width:100px;
    height:30px;
    background:#06f;
    border:none;
    cursor:pointer;
    margin:10px 30px;
    color:white;
    letter-spacing:1px;
    font-weight:bold;
}
拖拽核心代码:
复制代码 代码如下:
function drag(obj) {
    if (typeof obj === 'string') {
        var obj = document.getelementbyid(obj);
    } else {
        var obj = obj;
    }
    function fixevent(event) {
        event.target = event.srcelement;
        event.preventdefault = fixevent.preventdefault;
        return event;
    }
    fixevent.preventdefault = function () {
        this.returnvalue = false;
    };
    obj.onmousedown = mousedown;
    function mousedown(e) {
        var e = e || fixevent(window.event);
        var disx = e.clientx - obj.offsetleft;
        var disy = e.clienty - obj.offsettop;
        if (e.target.tagname === 'h2') {
            document.onmousemove = move;
            document.onmouseup = up;
        } else {
            document.onmousemove = null;
            document.onmouseup = null;           
        }
        function move(e) {
            var e = e || fixevent(window.event);
            var left = e.clientx - disx;
            var top = e.clienty - disy;
            if (obj.setcapture) {
                obj.setcapture();
            }
            if (left                 left = 0;
            } else if (left > document.documentelement.clientwidth - obj.offsetwidth) {
                left = document.documentelement.clientwidth - obj.offsetwidth;
            }
            if (top                 top = 0;
            } else if (top > document.documentelement.clientheight - obj.offsetheight) {
                top = document.documentelement.clientheight - obj.offsetheight;
            }
            obj.style.left = left + 'px';
            obj.style.top = top + 'px';
            return false;
        };
        function up() {
            if (obj.releasecapture) {
                obj.releasecapture();
            }
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };
}
调用代码:
复制代码 代码如下:
window.onload = function () {
    var login = document.getelementbyid('login');
    drag(login);
};
欢迎批评指正!!!
其它类似信息

推荐信息