js實現模態框拖拽

2022-07-05 10:00:27

本文範例為大家分享了js實現模態框拖拽的具體程式碼，供大家參考，具體內容如下

效果展示和需求分析

效果展示

需求分析

點選登入後登入表單和遮罩層顯示，點選關閉按鈕隱藏。
輸入密碼時可以明文檢視或者隱藏。
在表單的頭部按下滑鼠後可以拖拽表單。
滑鼠彈起拖拽結束。

程式碼分析

HTML 程式碼

<body>
    <a href="javascript:;" class="login">登入我的賬號</a>
    <form action="">
        <h4>賬號登入</h4>
        <div class="login-items">
            <label for="uname">使用者名稱：</label >
            <input type="text" placeholder="請輸入使用者名稱" id="uname">
            </div>
        <div class="login-items">
            <label for="psw">登入密碼：</label>
            <input type="password" name="" id="psw" placeholder="請輸入您的密碼">
            <span class="close" id="eye-state"></span>
        </div>
        <a href="javascript:;" class="login-btn">登入賬號</a >
        <a href="javascript:;" class="close-btn">關閉</a >
    </form>
    <div id="bg" class="login-bg"></div>
</body>
<script src="js/模態框.js"></script>

js 程式碼

var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
    
    var eyeFlag = 0;
    eyeState.onclick = setEye;
    login.onclick = goLogin;
    closeBtn.onclick = leaveLogin;
    loginForm.children[0].addEventListener('mousedown', dragForm);
    
    // 表單內容不可選，不然看著不舒服
    loginForm.onselectstart = function(e) {
        e.preventDefault();
    }
    
    // 1、實現小眼睛改變密碼輸入狀態
    function setEye() {
           if (!eyeFlag) {
            eyeState.className = 'open';
            pswInput.type = 'text';
            eyeFlag = 1;
        } else {
            eyeState.className = 'close';
            pswInput.type = 'password';
            eyeFlag = 0;
        }
    }
    
    // 2、外面登入按鈕實現表單、遮罩層的顯示和它自己隱藏
    function goLogin() {
        loginBg.style.visibility = 'visible';
        loginForm.style.display = 'block';
        this.style.display = 'none';
    }
    
    // 3、關閉按鈕實現表單、遮罩層的隱藏和外面登入按鈕的顯示
    function leaveLogin() {
        loginBg.style.visibility = 'hidden';
        loginForm.style.display = 'none';
        login.style.display = 'block';
    }
    
    // 4、實現表單拖拽效果
    function dragForm(e) {
        // 當滑鼠在表單的標題按下時獲取它在表單元素內的座標並繫結移動事件
        var x = e.pageX - this.parentNode.offsetLeft;
        var y = e.pageY - this.parentNode.offsetTop;
        document.addEventListener('mousemove', move);
        // 滑鼠彈起移除移動事件
        this.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move)
        });
        function move(event) {
            loginForm.style.left = event.pageX - x + 'px';
            loginForm.style.top = event.pageY - y + 'px';
    }
}

分析

密碼輸入框，在點選後面的眼睛即 span 元素時通過 eyeFlag 變數來判斷設定表單的 type 屬性和 span 的類名（該用哪個小眼睛圖）。
滑鼠是在表單標題區域按下後才有拖拽效果所以給標題繫結 mousedown 事件。
mousemove 和 mouseup 事件在滑鼠按下後分別繫結給 document 和 this(標題)。

在實現拖拽時將 mousemove 事件繫結給標題的話會出現 bug 。快速拖拽時滑鼠會離開標題導致表單沒有跟上。所以要將這個事件繫結給 document 。

表單跟隨滑鼠的原理：在滑鼠按下時根據滑鼠和表單在頁面的座標得到它在表單的座標（拖拽過程這個位置是不變的）。在滑鼠移動過程根據滑鼠在頁面的動態座標和它在表單的座標即可獲得表單在頁面的動態座標。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

js實現模態框拖拽

效果展示和需求分析

熱門文章