<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Perfect Drag </title>
<style type= "Text/css" >
HTML, Body {
Overflow:hidden;
}
Body, Div, H2, p {
margin:0;
padding:0;
}
Body {
Color: #fff;
Background: #000;
FONT:12PX/2 Arial;
}
p {
padding:0 10px;
margin-top:10px;
}
span {
Color: #ff0;
padding-left:5px;
}
#box {
Position:absolute;
width:300px;
height:150px;
Background: #333;
border:2px solid #ccc;
top:150px;
left:400px;
margin:0;
}
#box H2 {
height:25px;
Cursor:move;
Background: #222;
border-bottom:2px solid #ccc;
Text-align:right;
padding:0 10px;
}
#box H2 a {
Color: #fff;
font:12px/25px Arial;
Text-decoration:none;
Outline:none;
}
</style>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type= "Text/javascript" ></ Script>
<script type= "Text/javascript" >
$ (function () {
var bdrag = false;
var _x,_y;
var $box =$ ("#box")
var APos = [{
X: $ ("#box"). Offset (). Left,
Y: $ ("#box"). Offset (). Top
}];
$ ("Span:eq (1)"). Text (APOS[0].Y);
$ ("Span:eq (2)"). Text (apos[0].x);
$ ("#box H2:first"). MouseDown (function (event) {
var E=event | | window.event;
Bdrag = true;
_x=e.pagex-$box. Position (). Left;
_y=e.pagey-$box. Position (). Top;
return False
})
$ (document). MouseMove (function (event) {
if (!bdrag) return false;
var E=event | | window.event;
var x=e.pagex-_x;
var y=e.pagey-_y;
var MaxL = $ (document). Width ()-$box. Outerwidth ();
var maxt = $ (document). Height ()-$box. Outerheight ();
x = x < 0? 0:x;
x = x > MaxL? maxl:x;
y = y < 0? 0:y;
y = y > maxt? Maxt:y;
$box. css ({left:x,top:y});
Apos.push ({
X:x,
Y:y
});
Status ()
return False
}). MouseUp (function () {
Bdrag = false;
Status ()
return False
})
$ ("#box h2:first a"). Click (function () {
if (apos.length = = 1) return;
var timer = setinterval (function () {
var oPos = Apos.pop ();
OPos? ($box. css ({left:opos.x + "px", Top:opos.y + "px"})): Clearinterval (timer)
Status ();
},30);
}). MouseDown (function () {return false})
function status () {
$ ("#box span:eq (0)"). Text (Bdrag);
$ ("#box span:eq (1)"). Text ($box. Position (). top);
$ ("#box Span:eq (2)"). Text ($box. Position (). left);
}
Status ()
})
</script>
<body>
<div id= "box" >
<p><strong>Drag:</strong><span></span></p>
<p><strong>top:</strong><span></span></p>
<p><strong>left:</strong><span></span></p>
</div>
</body>
