Jquery pop-up layer drag, jquery pop-up drag
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "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>
<Script src = "framework/base/jquery-1.8.3.min.js"> </script>
<Script type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
Var mouseOffx = 0;
Var mouseOffy = 0;
Var isDrag = false;
$ (". DragBox div: eq (0)"). unbind (". click"). on ("mousedown", function (ev ){
MouseOffx = ev. clientX-$ (". dragBox div: eq (0)"). offset (). left;
MouseOffy = ev. clientY-$ (". dragBox div: eq (0)"). offset (). top;
IsDrag = true;
})
$ (Document). unbind (". click"). on ("mousemove", function (ev ){
Var mourseX = ev. clientX, mourseY = ev. clientY;
Var moveX = 0, moveY = 0;
If (isDrag === true ){
MoveX = mourseX-mouseOffx;
MoveY = mourseY-mouseOffy;
Var maxX = $ (window). outerWidth (false)-$ (". dragBox"). outerWidth (false );
Var maxY = $ (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
<Div class = "ui-mask" id = "mask" onselectstart = "return false"> </div>
<Div class = "dragBox">
<Div>
</Div>
</Div>
</Body>
</Html>