快捷導(dǎo)航
原生JS實(shí)現(xiàn)可拖拽登錄框

更新時(shí)間：2021年10月19日 11:47:24 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)可拖拽登錄框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文分享一個(gè)用原生JS實(shí)現(xiàn)的可拖拽登錄框，效果如下：
實(shí)現(xiàn)的代碼如下：
<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>原生JS實(shí)現(xiàn)可拖拽登錄框</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;
            /* 關(guān)閉登錄框的圖標(biāo) */
            background: url(images/1.png) no-repeat;
            cursor: pointer;
 
        }
 
        .ui-dialog-closebutton:hover {
            /* 關(guān)閉登錄框鼠標(biāo)懸停時(shí)的圖標(biāo) */
            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 {
            /* 輸入用戶名的圖標(biāo) */
            background: url(images/4.png) no-repeat 2px;
        }
 
        .ui-dialog-input-password {
            /* 輸入密碼的圖標(biāo) */
            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>
 
    <!-- 設(shè)置一個(gè)背景遮罩層,防止鼠標(biāo)選中事件 -->
    <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="手機(jī)/郵箱/用戶名" />
            </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="#" >立即注冊(cè)</a>
            </div>
        </div>
    </div>
 
 
    <script type="text/javascript">
 
        //聲明獲取元素對(duì)象方法
        function $(id) { return document.getElementById(id); }
 
        //聲明自動(dòng)居中元素方法（el = Element）
        function autoCenter(el) {
 
            //獲得網(wǎng)頁(yè)可視區(qū)域的寬和高
            var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;
 
            //獲得傳入元素的實(shí)際寬和高
            var elW = el.offsetWidth;
            var elH = el.offsetHeight;
 
            //設(shè)置元素的left為可視區(qū)域的寬度減去自身寬度的值除以2,top同理
            el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';
 
        }
 
        //自動(dòng)擴(kuò)展元素到全部顯示區(qū)域
        function fillToBody(el) {
 
            //設(shè)置當(dāng)前元素的寬度和高度為可視區(qū)域的寬和高
            el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }
 
        //設(shè)定鼠標(biāo)在X和Y方向的初始值為0
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;
 
        //是否可拖拽的標(biāo)記
        var isDraging = false;
 
        //鼠標(biāo)事件1——計(jì)算鼠標(biāo)相對(duì)拖拽元素的左上角的坐標(biāo)，并且標(biāo)記元素為可扡動(dòng)
        $('dialogDrag').addEventListener('mousedown', function (e) {
 
            //兼容IE鼠標(biāo)事件機(jī)制
            var e = e || window.event;
 
            //鼠標(biāo)的偏移等于當(dāng)前事件鼠標(biāo)按下去的時(shí)候X 的坐標(biāo)減去登錄浮層相對(duì)于頁(yè)面左邊的位置 
            mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
 
            //鼠標(biāo)的偏移等于當(dāng)前事件鼠標(biāo)按下去的時(shí)候Y的坐標(biāo)減去登錄浮層相對(duì)于頁(yè)面頂邊的位置 
            mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
 
            //設(shè)置可拖動(dòng)標(biāo)記為true;
            isDraging = true;
 
        })
 
        //鼠標(biāo)事件2——鼠標(biāo)移動(dòng)時(shí)，檢測(cè)元素是否標(biāo)記為可移動(dòng)，
        //如果是，則更新元素的位置，到當(dāng)前鼠標(biāo)的位置(要減去第一步中獲得的偏移)
        document.onmousemove = function (e) {
 
            //兼容IE鼠標(biāo)事件機(jī)制
            var e = e || window.event;
 
            //獲取鼠標(biāo)當(dāng)前頁(yè)面(網(wǎng)頁(yè)左上角)的位置,e.pageX與e.pageY與鼠標(biāo)按下時(shí)值不同
            var mouseX = e.pageX;
            var mouseY = e.pageY;
 
            //記錄鼠標(biāo)移動(dòng)事件發(fā)生時(shí)的x坐標(biāo)和y坐標(biāo)
            var moveX = 0;
            var moveY = 0;
 
 
            //如果當(dāng)前可以拖動(dòng)
            if (isDraging === true) {
 
                //拖動(dòng)元素的位置等于鼠標(biāo)相對(duì)于頁(yè)面位置減去鼠標(biāo)相對(duì)于拖動(dòng)元素左上角的位置
                moveX = mouseX - mouseOffsetX;
                moveY = mouseY - mouseOffsetY;
 
                //獲取頁(yè)面最大寬度和最大高度(注意clientWidth和offsetWidth的區(qū)別)
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
 
                //浮層對(duì)象的寬度和高度
                var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;
 
                //計(jì)算可拖動(dòng)的最大值
                var maxX = pageWidth - dialogWidth;
                var maxY = pageHeight - dialogHeight;
 
                //做判斷，防止拖拽出允許范圍
                moveX = Math.min(maxX, Math.max(0, moveX));
                moveY = Math.min(maxY, Math.max(0, moveY));
 
                //設(shè)置拖動(dòng)元素的新值
                $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';
 
            }
 
 
        }
 
        //鼠標(biāo)事件3——鼠標(biāo)松開的時(shí)候，標(biāo)記元素為不可扡動(dòng)
        document.onmouseup = function () {
            isDraging = false;
        }
 
        //展現(xiàn)登錄框
        function showDialog() {
            $('dialogMove').style.display = 'block';
            $('mask').style.display = 'block';
 
            //登錄框居中顯示
            autoCenter($('dialogMove'));
 
            //設(shè)置遮罩層充滿顯示區(qū)域
            fillToBody($('mask'))
 
 
        }
        //隱藏登錄框
        function hideDialog() {
            $('dialogMove').style.display = 'none';
            $('mask').style.display = 'none';
        }
 
        //當(dāng)改變窗口大小時(shí)的處理函數(shù)
        window.onresize = function () {
 
            //登錄框居中顯示
            autoCenter($('dialogMove'));
 
            //如果登錄框顯示就執(zhí)行遮罩層顯示函數(shù)
            if ($('dialogMove').style.display === 'block') {
                fillToBody($('mask'))
            }
 
 
        }
    </script>
</body>
 
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章: