jquery实现可拖拽弹出层特效
功能很简单，却非常的实用，代码更加的简洁，这里就不多废话了
奉上源码：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<styletype="text/css">
*
{
margin:0px;
padding:0px;
}
.dragBox
{
width:400px;
height:200px;
position:absolute;
top:40%;
left:40%;
background:#e8e8e8;
z-index:8001;
}
.dragBox>div
{
height:30px;
cursor:move;
background:#00ff21;
position:relative;
}
.ui-mask { width:100%; height:100%; background:#000; position:absolute; top:0px; z-index:8000; opacity:0.4; filter:Alpha(opacity=40); } </style> <scriptsrc="framework/base/jquery-1.8.3.min.js"></script> <scripttype="text/javascript"></script> <scripttype="text/javascript"> $(function(){ varmouseOffx=0; varmouseOffy=0; varisDrag=false; $(".dragBoxdiv:eq(0)").unbind(".click").on("mousedown",function(ev){ mouseOffx=ev.clientX-$(".dragBoxdiv:eq(0)").offset().left; mouseOffy=ev.clientY-$(".dragBoxdiv:eq(0)").offset().top; isDrag=true; }) $(document).unbind(".click").on("mousemove",function(ev){ varmourseX=ev.clientX,mourseY=ev.clientY; varmoveX=0,moveY=0; if(isDrag===true){ moveX=mourseX-mouseOffx; moveY=mourseY-mouseOffy; varmaxX=$(window).outerWidth(false)-$(".dragBox").outerWidth(false); varmaxY=$(window).outerHeight(false)-$(".dragBox").outerHeight(false); moveX=Math.min(maxX,Math.max(0,moveX)); moveY=Math.min(maxY,Math.max(0,moveY)); $(".dragBox").css({"left":moveX,"top":moveY}); } }); $(document).unbind(".click").on("mouseup",function(){ isDrag=false; }); }); </script> </head> <body> test <divclass="ui-mask"id="mask"onselectstart="returnfalse"></div> <divclass="dragBox"> <div> </div> </div> </body> </html>