js實現模態框拖拽

Posted on by

本文實例為大傢分享瞭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 。

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

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：