初始制作拖拽div以及弹出层 _Web前端

初步制作拖拽div以及弹出层

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>blog.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="../css/blog.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/blog.js"></script>
  </head>
  
  <body>
  		<div id="login">
  			<div class="login_header"><h2>登陆中心</h2></div>
  			<div class="username">账 号：<input type="text"></div>
  			<div class="password">密 码：<input type="password"></div>
  		</div>
  		<div id="screen"></div>
  </body>
</html>

css代码：

body{
	margin:0px;
	padding:0px;
	text-align:center;
	background:#fff;
}
#login{
	width:350px;
	height:200px;
	margin:0px;
	padding:0px;
	border:1px solid black;
	z-index:999;
	background:#fff;
}
#screen{
	width:100%;
	height:100%;
	background:#000;
	filter:alpha(opacity=30);
	opacity:0.3;
	position:absolute;
	top:0;
	left:0;
	z-index:998;
}

js代码（需要引入jquery）下面的document.documentElement可以用document代替：

		$(function(){
			//计算登陆框的内边距
			var marginTop = -(parseInt($("#login").css("height"))/2);
			var marginLeft = -(parseInt($("#login").css("width"))/2);
			//登陆框居中
			$("#login").css({
				position:"absolute",
				top:"50%",
				left:"50%",
				marginTop:marginTop,
				marginLeft:marginLeft
			});
			//登陆框绑定鼠标按下的事件
			$("#login").bind('mousedown',function(e){
				e = e||window.event;
				var old_mouse_x = e.clientX;
				var old_mouse_y = e.clientY;
				var new_mouse_x;
				var new_mouse_y;
				var old_div_x = parseInt($(this).css('left'));
				var old_div_y = parseInt($(this).css('top'));
				var new_div_x;
				var new_div_y;
                                //解决IE鼠标移出浏览器出现的bug
                                if(this.setCapture){
                                    this.setCapture();
                                }
				//绑定鼠标移动的事件（这里是给整个窗体绑定的，但是为了兼容IE，不使用window，注意也不是绑定login这个div）
				$(document.documentElement).bind('mousemove',function(e2){
					e2 = e2||window.event;
					new_mouse_x = e2.clientX;
					new_mouse_y = e2.clientY;
					new_div_x = (old_div_x + (new_mouse_x - old_mouse_x));
					new_div_y = (old_div_y + (new_mouse_y - old_mouse_y));
					$("#login").css({
						'left':new_div_x+'px',
						'top':new_div_y+'px',
						'position':'absolute',
						'marginTop':marginTop+'px',
						'marginLeft':marginLeft+'px'				
					});
				});
			});
			//绑定鼠标弹起的事件（这里是给整个窗体绑定的，但是为了兼容IE，不使用window，注意也不是绑定login这个div）
			$(document.documentElement).bind('mouseup',function(){
                                //解绑鼠标移动事件处理
				$(document.documentElement).unbind('mousemove');
                                //解决IE鼠标移出浏览器出现的bug
                                if(this.releaseCapture){
                                   this.releaseCapture();
                                 }
			});
		});

?上面的mousemove和mouseup事件绑定到document.documentElement上面，而不是login这个div上面，也不是window上面，因为window的话，在IE里面不兼容，在Login这个div上面的话，会出现div跟不上鼠标移动的情况，是为了解决鼠标移动较快的时候，div不能跟上鼠标的移动节奏所导致的一些Bug。。。

如果上面login这个div的定位不是使用的top:50,left:50%,而是通过像素来定位的话，需要注意：

//获取鼠标位置：
e.clientX,e.clientY

//获取login这个div的左上角的实际位置：
var _login = document.getElementById("login");
top = _login.offsetTop;
left = _login.offsetLeft;

//获取login这个div的宽高：
width = _login.offsetWidth;
height = _login.offsetHeight;

//获取浏览器实际大小：
if(typeof window.innerHeight != 'undefined'){
   alert({
         width:window.innerWidth,
         height:window.innerHeight
    });
}else{
  alert({
     width:document.documentElement.clientWidth,
     height:document.documentElement.clientHeight
  });

}