<! DOCTYPE html>
<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>
<body>
Test
<div class= "Ui-mask" id= "Mask" onselectstart= "return false" ></div>
<div class= "Dragbox" >
<div>
</div>
</div>
</body>
jquery Popup Layer Drag