Jquery实现可移动的窗口

js代码

 

function dialogMove(which){//which参数指定的是哪一个窗口的id，比如"#dialog"
	var offestLeft;
	var offestTop;
	var right=false;
	$(which).mousedown(function(e){
				var x=e.clientX;
				var y=e.clientY;
				var styleLeft=$(which).css("left");
				var styleTop=$(which).css("top");
				offestLeft=x-parseInt(styleLeft);
				offestTop=y-parseInt(styleTop);
				right=true;
										  });
	
	$(which).mousemove(function(e){
									 if(right){
				var nowLeft=e.clientX-offestLeft;
				var nowTop=e.clientY-offestTop;
				$(which).css("left",nowLeft).css("top",nowTop);}
										  });
	$(which).mouseup(function(e){				   
					right=false;			   
								   });

 

CSS代码

 

 

#dialog{display:none;
		position:absolute;
		top:0px;
		left:0px;
		z-index:1;
		background-color:#38B0DE;
		
		-moz-border-radius: 8px 0 0 0;
		-webkit-border-radius: 8px 0 0 0;
		border-radius: 8px 0 0 0;
		
		
		}
#title{position:absolute;
		
		
		background: black;
		opacity: 0.2;
		filter: alpha(opacity=20);
		margin-left:0px;
		margin-top:0px;
		-moz-border-radius: 8px 0 0 0;
		-webkit-border-radius: 8px 0 0 0;
		border-radius: 8px 0 0 0;
	
		}
#content{position:absolute;
background-color:#38B0DE;
}

 

html

 

 

<div id="dialog">
				<div id="title"> <img id="close" src="../images/desktopPicture/close.png" width="25" height="25" style="float:right"/> </div>
				<div id="content"> 
					<iframe id="contentIframe"></iframe>
				</div>
		</div>