溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“原生JS怎么實(shí)現(xiàn)可拖拽登錄框”，在日常操作中，相信很多人在原生JS怎么實(shí)現(xiàn)可拖拽登錄框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”原生JS怎么實(shí)現(xiàn)可拖拽登錄框”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
效果如下：
實(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)頁可視區(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ì)于頁面左邊的位置
mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
//鼠標(biāo)的偏移等于當(dāng)前事件鼠標(biāo)按下去的時(shí)候Y的坐標(biāo)減去登錄浮層相對(duì)于頁面頂邊的位置
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)前頁面(網(wǎng)頁左上角)的位置,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ì)于頁面位置減去鼠標(biāo)相對(duì)于拖動(dòng)元素左上角的位置
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
//獲取頁面最大寬度和最大高度(注意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>到此，關(guān)于“原生JS怎么實(shí)現(xiàn)可拖拽登錄框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(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)站二維碼