<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕課網-拖拽效果</title>
<style type="text/css">
body{
background: url(images/baidu_demo.png) no-repeat top center #fff;
padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑";
}
.ui-dialog{
width: 380px;height: auto;display: none;
position: absolute;z-index: 9000;
top: 100px;left: 100px;
border: 1px solid #d5d5d5;background: #fff;
}
.ui-dialog a{ text-decoration: none;}
.ui-dialog-title{
height: 48px;line-height: 48px;padding-left: 20px;color: #535353;font-size: 16px;
background: #f5f5f5;
border-bottom: 1px solid #efefef;
cursor: move;
}
.ui-dialog-title-closebutton{
width: 16px;height: 16px;display: block;
position: absolute;top: 12px;right: 20px;
background: url(images/close_def.png);
}
.ui-dialog-title-closebutton:hover{
background: url(images/close_hov.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{
background: url(images/input_username.png) no-repeat;
}
.ui-dialog-input-password{
background: url(images/input_password.png) no-repeat;
}
.ui-dialog-submit{
width: 100%;height: 50px;display: block;
font-size: 16px;color: #fff;
background: #3b7ae3;
text-align: center;line-height: 50px;
}
.ui-dialog-submit:hover{
background: #3f81b0;
}
.ui-mask{
width: 100%;height: 100%;background: #000;opacity: 0.4;filter: Alpha(opacity=40);
position: absolute;top: 0px;left: 0px;z-index: 8000;display: none;
}
.link{
text-align: right;line-height: 20px;padding-right: 40px;
}
</style>
</head>
<body >
<div class="ui-dialog" id="dialog">
<div class="ui-dialog-title" id="dialogTitle">
登錄通行證
<a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="手機/郵箱/用戶名" class="ui-dialog-input ui-dialog-input-username">
</div>
<div class="ui-dialog-pt15 ui-dialog-l40">
<input type="text" value="密碼" class="ui-dialog-input ui-dialog-input-password">
</div>
<div class=" ui-dialog-l40 ">
<a href="#">忘記密碼</a>
</div>
<div>
<a href="#" class="ui-dialog-submit">登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注冊</a>
</div>
</div>
</div>
<div class="ui-mask" id="mask" onslectstart="return false"></div>
<div class="link">
<a href="javascript:showDialog();">登錄</a>
</div>
<script type="text/javascript">
// 獲取元素對象
function g(id){ return document.getElementById(id); }
// 自動居中 - 登錄浮層 ( el = Elemenet)
function autoCenter( el ){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = ( bodyW - elW ) / 2 + 'px';
el.style.top = ( bodyH - elH ) / 2 + 'px';
}
// 自動全屏 - 遮罩
function fillToBody( el ){
el.style.width = document.documentElement.clientWidth +'px';
el.style.height = document.documentElement.clientHeight +'px';
}
var mouseOffsetX = 0; // 偏移
var mouseOffsetY = 0;
var isDraging = false; // 是否可拖拽的標記
// 鼠標事件1 － 在標題欄上按下（要計算鼠標相對拖拽元素的左上角的坐標，并且標記元素為可拖動）
g('dialogTitle').addEventListener('mousedown',function(e){
var e = e || window.event;
mouseOffsetX = e.pageX - g('dialog').offsetLeft;
mouseOffsetY = e.pageY - g('dialog').offsetTop;
isDraging = true;
})
// 鼠標事件2 － 鼠標移動時（要檢測，元素是否可標記為移動，如果是，則更新元素的位置，到當前鼠標的位置［ps：要減去第一步中獲得的偏移］）
document.onmousemove = function( e ){
var e = e || window.event;
var mouseX = e.pageX; // 鼠標當前的位置
var mouseY = e.pageY;
var moveX = 0; // 浮層元素的新位置
var moveY = 0;
if( isDraging === true ){
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
// 范圍限定 moveX > 0 并且 moveX < (頁面最大寬度 - 浮層的寬度)
// moveY > 0 并且 movey < (頁面最大高度 - 浮層的高度)
var pageWidth = document.documentElement.clientWidth ;
var pageHeight = document.documentElement.clientHeight ;
var dialogWidth = g('dialog').offsetWidth;
var dialogHeight = g('dialog').offsetHeight;
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight- dialogHeight;
moveX = Math.min( maxX , Math.max(0,moveX) );
moveY = Math.min( maxY , Math.max(0,moveY) );
g('dialog').style.left = moveX + 'px';
g('dialog').style.top = moveY + 'px';
}
}
// 鼠標事件3 － 鼠標松開的時候（標記元素為不可拖動即可）
document.onmouseup = function(){
isDraging = false;
}
// 展現登錄浮層
function showDialog(){
【任務1】
g('mask').style.display = 'block';
autoCenter(g('dialog'));
fillToBody( g('mask') );
}
// 隱藏登錄浮層
function hideDialog(){
g('dialog').style.display = 'none';
g('mask').style.display = 'none';
}
【任務2】 =function(){
autoCenter(g('dialog'));
fillToBody( g('mask') );
}
</script>
</body>
</html>
