初步制作拖拽div以及弹出层
<!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 name="code">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 });}?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?