溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下js如何實(shí)現(xiàn)模態(tài)框拖拽的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
效果展示
需求分析
點(diǎn)擊登錄后登錄表單和遮罩層顯示，點(diǎn)擊關(guān)閉按鈕隱藏。
輸入密碼時(shí)可以明文查看或者隱藏。
在表單的頭部按下鼠標(biāo)后可以拖拽表單。
鼠標(biāo)彈起拖拽結(jié)束。
代碼分析
HTML 代碼
<body> <a href="javascript:;" class="login">登錄我的賬號(hào)</a> <form action=""> <h5>賬號(hào)登錄</h5> <div class="login-items"> <label for="uname">用戶(hù)名：</label > <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" id="uname"> </div> <div class="login-items"> <label for="psw">登錄密碼：</label> <input type="password" name="" id="psw" placeholder="請(qǐng)輸入您的密碼"> <span class="close" id="eye-state"></span> </div> <a href="javascript:;" class="login-btn">登錄賬號(hào)</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、實(shí)現(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、外面登錄按鈕實(shí)現(xiàn)表單、遮罩層的顯示和它自己隱藏
function goLogin() {
loginBg.style.visibility = 'visible';
loginForm.style.display = 'block';
this.style.display = 'none';
}
// 3、關(guān)閉按鈕實(shí)現(xiàn)表單、遮罩層的隱藏和外面登錄按鈕的顯示
function leaveLogin() {
loginBg.style.visibility = 'hidden';
loginForm.style.display = 'none';
login.style.display = 'block';
}
// 4、實(shí)現(xiàn)表單拖拽效果
function dragForm(e) {
// 當(dāng)鼠標(biāo)在表單的標(biāo)題按下時(shí)獲取它在表單元素內(nèi)的坐標(biāo)并綁定移動(dòng)事件
var x = e.pageX - this.parentNode.offsetLeft;
var y = e.pageY - this.parentNode.offsetTop;
document.addEventListener('mousemove', move);
// 鼠標(biāo)彈起移除移動(dòng)事件
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 元素時(shí)通過(guò) eyeFlag 變量來(lái)判斷設(shè)置表單的 type 屬性和 span 的類(lèi)名（該用哪個(gè)小眼睛圖）。
鼠標(biāo)是在表單標(biāo)題區(qū)域按下后才有拖拽效果所以給標(biāo)題綁定 mousedown 事件。
mousemove 和 mouseup 事件在鼠標(biāo)按下后分別綁定給 document 和 this(標(biāo)題)。
在實(shí)現(xiàn)拖拽時(shí)將 mousemove 事件綁定給標(biāo)題的話會(huì)出現(xiàn) bug ?？焖偻献r(shí)鼠標(biāo)會(huì)離開(kāi)標(biāo)題導(dǎo)致表單沒(méi)有跟上。所以要將這個(gè)事件綁定給 document 。
表單跟隨鼠標(biāo)的原理：在鼠標(biāo)按下時(shí)根據(jù)鼠標(biāo)和表單在頁(yè)面的坐標(biāo)得到它在表單的坐標(biāo)（拖拽過(guò)程這個(gè)位置是不變的）。在鼠標(biāo)移動(dòng)過(guò)程根據(jù)鼠標(biāo)在頁(yè)面的動(dòng)態(tài)坐標(biāo)和它在表單的坐標(biāo)即可獲得表單在頁(yè)面的動(dòng)態(tài)坐標(biāo)。
以上就是“js如何實(shí)現(xiàn)模態(tài)框拖拽”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼