CSS+JS拖动层附半透明阴影

CSS：

#layer { position:absolute; z-index:auto; padding:0px 0px; margin:0px 0px; width:607px; }
#layer #win { float:left; background-color:#EEEEEE; width:600px; border:1px solid #000000; margin:0px 0px; padding:0px 0px; }
#layer #win #winTitle { cursor:move; font-family:Verdana; font-weight:bold; font-size:14px; padding:10px 10px; background-color:#EEEEEE; color:#CC0000; -moz-user-select:none; }
#layer #win #winClose { cursor:pointer; font-family:Verdana; font-weight:normal; font-size:9px; padding:10px 10px; color:#666666; position:relative; float:right; }
#layer #win #winBody { padding:5px 10px; font-family:Verdana; font-size:10px; background-color:#FFFFFF; }
#layer #win #winFoot { text-align:center; padding:10px 10px; background-color:#EEEEEE; }
#layer .shadow { background-color:#000000; FILTER: alpha(opacity=50); opacity: 0.5; moz-opacity: .5; overflow:hidden; }
#layer #shadow1 { float:left; margin:5px 0px 0px 0px; padding:0px 0px; width:5px; }
#layer #shadow2 { clear:both; margin:0px 0px 0px 5px; padding:0px 0px; width:602px; height:5px; }

xhtml：

CLOSE
Title
Body
Foot

JS：

function changeClose(){
 document.getElementById("layer").style.display="none";
}
function autoHeight(o1,o2){
 var h=o1.offsetHeight-5;
 o2.style. drag(o1,o2){
 o1.onselectstart=function() {return(false)};
 o1.onmousedown=function(e){
  e=e||window.event;
  e.cancelBubble = true;
  var x=e.layerX||e.offsetX;
  var y=e.layerY||e.offsetY;
  document.onmousemove=function(e){
   e=e||window.event;
   o2.style.left=(e.clientX-x)+"px";
   o2.style.top=(e.clientY-y)+"px";
  };
  document.onmouseup=function(){document.onmousemove=null;};
 };
}
drag(document.getElementById("winTitle"),document.getElementById("layer"));