<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-拖拽效果</title>
<style type="text/css">
body{padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";}
/*登录浮层组件*/
.ui-dialog{
width: 380px;height: auto;
position: absolute;z-index: 9000;
top: 100px;left: 100px;
border: 1px solid #D5D5D5;background: #fff;
display:none;
}
.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: 36px;height: 36px;display: block;
position: absolute;top: 0px;right: 0px;
cursor: pointer;font-size: 12px;color:#666;
}
/*内容区域*/
.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-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{
display:none;
background:rgba(0,0,0,.4);
position: absolute;
top: 0px;z-index: 8000;
}
.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">
<span>登录通行证</span>
<span id="btn_close" class="ui-dialog-closebutton">关闭</span>
</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="javascript:;" class="ui-dialog-submit">登录</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注册</a>
</div>
</div>
</div>
<div class="link">
<a href="javascript:;" id='bgn_login'>登录</a>
</div>
<div class="ui-mask" id="mask"></div>
</body>
<script>
window.onload = function() {
var offsetX = 0;
var offsetY = 0;
var isDrag = false;
var bw = document.documentElement.clientWidth;
var bh = document.documentElement.clientHeight;
function g(id) {
return document.getElementById(id);
}
//自动居中
function autoCenter(ele) {
var bodyW = bw;
var bodyH = bh;
var eleW = ele.offsetWidth;
var eleH = ele.offsetHeight;
ele.style.left = (bodyW - eleW) / 2 + 'px';
ele.style.top = (bodyH - eleH) / 2 + 'px';
}
//全屏
function fillToBody(ele) {
ele.style.width = bw + 'px';
ele.style.height = bh + 'px';
}
//拖动
function dragPanel(ele) {
ele.onmousedown = function(e) {
var e = e || window.event;
offsetX = e.pageX - this.offsetLeft;
offsetY = e.pageY - this.offsetTop;
isDrag = true;
}
document.onmousemove = function(e) {
var e = e || window.event;
//获取鼠标的最新的位置
var stopX = e.pageX - offsetX;
var stopY = e.pageY - offsetY;
//可拖动范围的最大值
var stopX_r = bw - ele.offsetWidth;
var stopY_b = bh - ele.offsetHeight;
//限定可拖动的范围
stopX = Math.min(Math.max(stopX,0), stopX_r);
stopY = Math.min(Math.max(stopY,0), stopY_b);
if(isDrag) {
ele.style.left = stopX + 'px';
ele.style.top = stopY + 'px';
}
}
document.onmouseup = function() {
isDrag = false;
}
}
dragPanel(g('dialog'));
function showDialog() {
g('dialog').style.display = 'block';
g('mask').style.display = 'block';
autoCenter(g('dialog'));
fillToBody(g('mask'));
}
function hideDialog() {
g('dialog').style.display = 'none';
g('mask').style.display = 'none';
}
g('bgn_login').onclick = function() {
showDialog();
}
g('btn_close').onclick = function() {
hideDialog();
}
window.onresize = function() {
autoCenter(g('dialog'));
fillToBody(g('mask'));
}
}
</script>
</html>
找到原因了document.documentElement.clientWidth不能设置成全局变量