JQuery挪动层-简单型

JQuery移动层---简单型

当然记得加载jquery的js文件

HTML 代码:

<div id="dagbox"><h3><span onclick="$('#dagbox').hide()"></span></h3><div 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 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);//松开鼠标后停止移动并恢复成不透明});});