原生JS实现可拖拽登录框

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验
原作者: [db:作者] 来自: [db:来源] 收藏邀请
本文分享一个用原生JS实现的可拖拽登录框，效果如下：
实现的代码如下：
<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>原生JS实现可拖拽登录框</title>
 
    <style type="text/css">
        body {
            /* 背景图 */
            background: url(images/0.png) #fff top center no-repeat;
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            font-family: "微软雅黑";
        }
 
        .link {
            text-align: right;
            line-height: 20px;
            padding-right: 40px;
        }
 
        .ui-dialog {
            width: 380px;
            height: auto;
            display: none;
            position: absolute;
            z-index: 9000;
            top: 0px;
            left: 0px;
            border: 1px solid #D5D5D5;
            background: #fff;
        }
 
        .ui-dialog a {
            text-decoration: none;
        }
 
        .ui-dialog-title {
            height: 48px;
            line-height: 48px;
            padding: 0px 20px;
            color: #535353;
            font-size: 16px;
            border-bottom: 1px solid #efefef;
            background: #f5f5f5;
            cursor: move;
            user-select: none;
        }
 
        .ui-dialog-closebutton {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            top: 12px;
            right: 20px;
            /* 关闭登录框的图标 */
            background: url(images/1.png) no-repeat;
            cursor: pointer;
 
        }
 
        .ui-dialog-closebutton:hover {
            /* 关闭登录框鼠标悬停时的图标 */
            background: url(images/2.png);
        }
 
        .ui-dialog-content {
            padding: 15px 20px;
        }
 
        .ui-dialog-pt15 {
            padding-top: 15px;
        }
 
        .ui-dialog-l40 {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
 
        .ui-dialog-input {
            width: 100%;
            height: 40px;
            margin: 0px;
            padding: 0px;
            border: 1px solid #d5d5d5;
            font-size: 16px;
            color: #c1c1c1;
            text-indent: 25px;
            outline: none;
        }
 
        .ui-dialog-input-username {
            /* 输入用户名的图标 */
            background: url(images/4.png) no-repeat 2px;
        }
 
        .ui-dialog-input-password {
            /* 输入密码的图标 */
            background: url(images/3.png) no-repeat 2px;
        }
 
        .ui-dialog-submit {
            width: 100%;
            height: 50px;
            background: #3b7ae3;
            border: none;
            font-size: 16px;
            color: #fff;
            outline: none;
            text-decoration: none;
            display: block;
            text-align: center;
            line-height: 50px;
        }
 
        .ui-dialog-submit:hover {
            background: #3f81b0;
        }
 
        .ui-mask {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            top: 0px;
            height: 0px;
            z-index: 8000;
            opacity: 0.4;
 
            /*兼容低版本的ie*/
            filter: Alpha(opacity=40);
        }
    </style>
</head>
 
<body>
 
    <div class="link">
        <a href="javascript:showDialog();" >登录</a>
    </div>
 
    <!-- 设置一个背景遮罩层,防止鼠标选中事件 -->
    <div class="ui-mask" id="mask" onselectstart="return false"></div>
 
    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
 
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            登录通行证
            <a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
        </div>
 
        <div class="ui-dialog-content">
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
            </div>
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >忘记密码</a>
            </div>
 
            <div>
                <a class="ui-dialog-submit" href="#" >登录</a>
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >立即注册</a>
            </div>
        </div>
    </div>
 
 
    <script type="text/javascript">
 
        //声明获取元素对象方法
        function $(id) { return document.getElementById(id); }
 
        //声明自动居中元素方法（el = Element）
        function autoCenter(el) {
 
            //获得网页可视区域的宽和高
            var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;
 
            //获得传入元素的实际宽和高
            var elW = el.offsetWidth;
            var elH = el.offsetHeight;
 
            //设置元素的left为可视区域的宽度减去自身宽度的值除以2,top同理
            el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';
 
        }
 
        //自动扩展元素到全部显示区域
        function fillToBody(el) {
 
            //设置当前元素的宽度和高度为可视区域的宽和高
            el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }
 
        //设定鼠标在X和Y方向的初始值为0
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;
 
        //是否可拖拽的标记
        var isDraging = false;
 
        //鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动
        $('dialogDrag').addEventListener('mousedown', function (e) {
 
            //兼容IE鼠标事件机制
            var e = e || window.event;
 
            //鼠标的偏移等于当前事件鼠标按下去的时候X 的坐标减去登录浮层相对于页面左边的位置 
            mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
 
            //鼠标的偏移等于当前事件鼠标按下去的时候Y的坐标减去登录浮层相对于页面顶边的位置 
            mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
 
            //设置可拖动标记为true;
            isDraging = true;
 
        })
 
        //鼠标事件2——鼠标移动时，检测元素是否标记为可移动，
        //如果是，则更新元素的位置，到当前鼠标的位置(要减去第一步中获得的偏移)
        document.onmousemove = function (e) {
 
            //兼容IE鼠标事件机制
            var e = e || window.event;
 
            //获取鼠标当前页面(网页左上角)的位置,e.pageX与e.pageY与鼠标按下时值不同
            var mouseX = e.pageX;
            var mouseY = e.pageY;
 
            //记录鼠标移动事件发生时的x坐标和y坐标
            var moveX = 0;
            var moveY = 0;
 
 
            //如果当前可以拖动
            if (isDraging === true) {
 
                //拖动元素的位置等于鼠标相对于页面位置减去鼠标相对于拖动元素左上角的位置
                moveX = mouseX - mouseOffsetX;
                moveY = mouseY - mouseOffsetY;
 
                //获取页面最大宽度和最大高度(注意clientWidth和offsetWidth的区别)
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
 
                //浮层对象的宽度和高度
                var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;
 
                //计算可拖动的最大值
                var maxX = pageWidth - dialogWidth;
                var maxY = pageHeight - dialogHeight;
 
                //做判断，防止拖拽出允许范围
                moveX = Math.min(maxX, Math.max(0, moveX));
                moveY = Math.min(maxY, Math.max(0, moveY));
 
                //设置拖动元素的新值
                $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';
 
            }
 
 
        }
 
        //鼠标事件3——鼠标松开的时候，标记元素为不可扡动
        document.onmouseup = function () {
            isDraging = false;
        }
 
        //展现登录框
        function showDialog() {
            $('dialogMove').style.display = 'block';
            $('mask').style.display = 'block';
 
            //登录框居中显示
            autoCenter($('dialogMove'));
 
            //设置遮罩层充满显示区域
            fillToBody($('mask'))
 
 
        }
        //隐藏登录框
        function hideDialog() {
            $('dialogMove').style.display = 'none';
            $('mask').style.display = 'none';
        }
 
        //当改变窗口大小时的处理函数
        window.onresize = function () {
 
            //登录框居中显示
            autoCenter($('dialogMove'));
 
            //如果登录框显示就执行遮罩层显示函数
            if ($('dialogMove').style.display === 'block') {
                fillToBody($('mask'))
            }
 
 
        }
    </script>
</body>
 
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。