JQuery移动层---简单型

当然记得加载jquery的js文件

HTML 代码:

<div id="dagbox">

	<h3><span onclick="$('#dagbox').hide()"></span></h3>
	<div class="mid">
		<form>

		<div>
		
			<select name="field">
			<option value="sn">按资产编号</option>
			<option value="ip">按IP</option>
			<option value="cb">按机房</option>
			<option value="de">按备注</option>
			</select>
		</div>
		<div class="dtbd"></div>
		<div class="ml30">
			<select name="op1">
				
				<option value="等于">等于</option></select>  <input type="text" name="search1" />
			<br/>
			<input type="radio" name="so" value='1' checked/>与 &nbsp;&nbsp; <input type="radio" name="so" value="2" > 或
			<br/>
						<select name="op2">
				
				<option value="等于">等于</option></select> <input type="text" name="search2" />
		</div>

		<div class="dbt">
			<input type="submit" onclick="checkform(this.form)" value="确定" /> <input type="button" onclick="$('#dagbox').hide()" value="取消"/>
		</div>
		<form>
	
	</div>
</div>

 CSS 样式

/* didag box */
#dagbox
{
display:none;
	position:absolute;
	left:200px;
	top:100px;
	width:298px;
	height:207px;
	background:url(../images/dialog/db.gif) 0 100% no-repeat;
	padding-bottom:3px;
	overflow:hidden;
}
#dagbox h3{background:url(../images/dialog/dt.gif) no-repeat; height:24px; position:relative;}
#dagbox h3 span{display:block;height:16px;width:19px; position:absolute;right:3px;top:5px;background:url(../images/dialog/dc.gif) no-repeat;cursor:pointer;}
#dagbox .mid{
padding:6px 9px;
background:url(../images/dialog/dm.gif) repeat-y;
height:171px;
width:280px;

}
#dagbox .mid div{cursor:default;}
#dagbox .dtbd{height:1px;overflow:hidden;background:#33abe9;font-size:0;line-height:0;width:250px;margin:5px 0px 5px 30px;cursor:default;}
.ml30{margin-left:30px;line-height:25px;text-align:center;}
#dagbox .dbt{ text-align:right;padding-top:30px;padding-right:10px;cursor:default;padding-bottom:15px;}
#dagbox .dbt input {width:80px;height:21px;line-height:19px; font-size:12px;}
#dagbox .txt{width:150px;margin-left:5px;}

 js代码:

$(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
$("#dagbox").css('cursor','move');

$("#dagbox").mousedown(function(e){
$(document).bind("selectstart", function(){
                return false;
            });
_move=true;
_x=e.clientX-parseInt($("#dagbox").css("left"));
_y=e.clientY-parseInt($("#dagbox").css("top"));

//$("#dagbox").fadeTo(20, 0.5);//点击后开始拖动并透明显示
});
$(document).mousemove(function(e){
if(_move){
var x=e.clientX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.clientY-_y;
//$("#stbox").html("("+x+","+y+")");
//控制在界面以内
if(x<0)x=0;
if(y<0)y=0;
wth=$("#dagbox").outerWidth(true);
hht=$("#dagbox").outerHeight(true);

if(wth+x>$(window).width())x=$(window).width()-wth;
if(hht+y>$(window).height())y=$(window).height()-hht;
$("#dagbox").css({top:y,left:x});//控件新位置

}
}).mouseup(function(){
_move=false;

$(document).bind("selectstart", function(){
                return true;
            });
//$("#dagbox").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
});
});