js實現(xiàn)模態(tài)框拖拽

更新時間：2022年07月05日 08:17:21 作者：TKOP_

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)模態(tài)框拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)模態(tài)框拖拽的具體代碼，供大家參考，具體內(nèi)容如下

效果展示和需求分析

效果展示

需求分析

點(diǎn)擊登錄后登錄表單和遮罩層顯示，點(diǎn)擊關(guān)閉按鈕隱藏。
輸入密碼時可以明文查看或者隱藏。
在表單的頭部按下鼠標(biāo)后可以拖拽表單。
鼠標(biāo)彈起拖拽結(jié)束。

代碼分析

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">關(guān)閉</a >
? ? </form>
? ? <div id="bg" class="login-bg"></div>
</body>
<script src="js/模態(tài)框.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);
?? ?
?? ?// 表單內(nèi)容不可選，不然看著不舒服
?? ?loginForm.onselectstart = function(e) {
? ? ?? ?e.preventDefault();
?? ?}
?? ?
?? ?// 1、實現(xiàn)小眼睛改變密碼輸入狀態(tài)
?? ?function setEye() {
? ??? ??? ?if (!eyeFlag) {
? ? ? ? ?? ?eyeState.className = 'open';
? ? ? ? ?? ?pswInput.type = 'text';
? ? ? ? ?? ?eyeFlag = 1;
? ? ?? ?} else {
? ? ? ? ?? ?eyeState.className = 'close';
? ? ? ? ?? ?pswInput.type = 'password';
? ? ? ? ?? ?eyeFlag = 0;
? ? ?? ?}
?? ?}
?? ?
?? ?// 2、外面登錄按鈕實現(xiàn)表單、遮罩層的顯示和它自己隱藏
?? ?function goLogin() {
? ? ?? ?loginBg.style.visibility = 'visible';
? ? ?? ?loginForm.style.display = 'block';
? ? ?? ?this.style.display = 'none';
?? ?}
?? ?
?? ?// 3、關(guān)閉按鈕實現(xiàn)表單、遮罩層的隱藏和外面登錄按鈕的顯示
?? ?function leaveLogin() {
? ? ?? ?loginBg.style.visibility = 'hidden';
? ? ?? ?loginForm.style.display = 'none';
? ? ?? ?login.style.display = 'block';
?? ?}
?? ?
?? ?// 4、實現(xiàn)表單拖拽效果
?? ?function dragForm(e) {
?? ??? ?// 當(dāng)鼠標(biāo)在表單的標(biāo)題按下時獲取它在表單元素內(nèi)的坐標(biāo)并綁定移動事件
? ? ?? ?var x = e.pageX - this.parentNode.offsetLeft;
? ? ?? ?var y = e.pageY - this.parentNode.offsetTop;
? ? ?? ?document.addEventListener('mousemove', move);
? ? ?? ?// 鼠標(biāo)彈起移除移動事件
? ? ?? ?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';
? ? }
}

分析

密碼輸入框，在點(diǎn)擊后面的眼睛即 span 元素時通過 eyeFlag 變量來判斷設(shè)置表單的 type 屬性和 span 的類名（該用哪個小眼睛圖）。
鼠標(biāo)是在表單標(biāo)題區(qū)域按下后才有拖拽效果所以給標(biāo)題綁定 mousedown 事件。
mousemove 和 mouseup 事件在鼠標(biāo)按下后分別綁定給 document 和 this(標(biāo)題)。

在實現(xiàn)拖拽時將 mousemove 事件綁定給標(biāo)題的話會出現(xiàn) bug ?？焖偻献r鼠標(biāo)會離開標(biāo)題導(dǎo)致表單沒有跟上。所以要將這個事件綁定給 document 。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: