首页手记关于拖拽效果

关于拖拽效果

标签：

Html/CSS JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
body{
background: url("img/baidu_demo.png") center top no-repeat #fff;
padding: 0;
margin: 0 auto;
font-family: 微软雅黑;
font-size: 12px;
}
.ui_dialog{
width: 380px;
height: auto;
line-height: 40px;
position: absolute;
left:100px;
top: 100px;
z-index: 9000;
background-color: #fff;
border: 1px solid #d5d5d5;
display: none;
}
.ui_dialog_title{
height: 48px;
line-height: 48px;
padding-left: 20px;
color: #535353;
font-size: 16px;
background-color: #f5f5f5;
border-bottom: 1px solid #efefef;
cursor: move;
}
.ui_dialog_title_closebutton{
display: block;
width: 16px;
height: 16px;
position: absolute;
right: 20px;
top: 12px;
background: url("img/close_def.png") center center no-repeat;
}
.ui_dialog_title_closebutton:hover{
background: url("img/close_hov.png") center center no-repeat;
}
.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: 100%;
margin: 0;
padding: 0;
border: solid 1px #d5d5d5;
font-size: 16px;
color: #c1c1c1;
text-indent: 25px;
outline: none;
}
.ui-dialog-input-username{
background: url("img/input_username.png") no-repeat;
}
.ui-dialog-input-password{
background: url("img/input_password.png") no-repeat;
}
.ui-dialog-submit{
display: block;
width: 300px;
height: 40px;
line-height: 40px;
background-color: #0f64ce;
color: #fff;
text-align: center;
margin: 0 auto;
font-size: 16px;
}
.ui_mask{
width: 100%;
height: 100%;
background:rgba(0,0,0,0.5);
position: absolute;
top:0;
left: 0;
z-index: 8000;
display: none;
}
.link{
text-align: right;
line-height: 20px;
padding-right: 10px;
}
.link a{
font-size: 14px;
}
</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" id="closeButton"></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="手机/邮箱/用户名" />
</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="#">立即注册</a>
</div>
</div>
</div>

<!--遮罩层-->
    <div class="ui_mask" id="mask" onselect="return false"></div>
    <div class="link">
        <a href="javascript:showDialog();" id="login">登录</a>
    </div>

</body>
<script type="text/javascript">
function getDOM(id) {
return typeof (id)==="string"?document.getElementById(id):id;
}
// 自动居中函数;
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 fillBody(el) {
var bodyW=document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;

    el.style.width=bodyW+'px';
    el.style.height=bodyH+'px';

}
var login=getDOM("login"),
    mask=getDOM("mask"),
    closeButton=getDOM("closeButton"),
    dialog=getDOM("dialog"),
    dialogTitle=getDOM("dialog_title");
    mouseOffX=0, //鼠标位置 相对dialog的偏移值
    mouseOffY=0,
    isDraging=false; //判断是否可以拖拽
    mask.onclick=function () {
        mask.style.display="none";
        dialog.style.display="none";
    }
function showDialog() {
    mask.style.display="block";
    dialog.style.display="block";
    autoCenter(dialog);
    fillBody(mask);
}
function hideDialog() {
    mask.style.display="none";
    dialog.style.display="none";
}

// 鼠标事件1：在标题栏按下时计算鼠标相对拖拽元素左上角的偏移值，并标记为可拖动；
getDOM("dialogTitle").addEventListener('mousedown',function (e) {
var e = e||window.event;
mouseOffX=e.pageX-dialog.offsetLeft;
mouseOffY=e.pageY-dialog.offsetTop;
isDraging=true;
})
//鼠标事件2：鼠标移动时（首先检测元素是否可以拖动，是则更新元素的新位置到鼠标拖动的位置【要减去相对偏移值】）
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-mouseOffX;
            moveY=mouseY-mouseOffY;
            //限定拖动范围

// 获取页面宽高
var pageWidth=document.documentElement.clientWidth;
var pageHeight=document.documentElement.clientHeight;
// 获取登录框宽高
var dialogWidth=dialog.offsetWidth;
var dialogHeight=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));
getDOM("dialog").style.left=moveX + 'px';
getDOM("dialog").style.top=moveY + 'px';
}
}
//鼠标事件3：鼠标松开时（标记元素不可拖动即可）
document.onmouseup=function () {
isDraging=false;
}
window.onresize=function () {
autoCenter(dialog);
fillBody(mask);
}
</script>
</html>