<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <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;p adding-left:5px;} #box {position:absolute;width:300px;height:150px;background: #333; border:2px solid #ccc; top:50%;left:50%;margin:- 75px 0 0-150px;} #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 type= "Text/javascript" > Window.onload=function () {var Obox=document.getelementbyid ("Bo X "); var oH2 = obox.getelementSbytagname ("H2") [0]; var OA = Obox.getelementsbytagname ("a") [0]; var Aspan = Obox.getelementsbytagname ("span"); var disx = Disy = 0; var bdrag = false; var APos = [{x:obox.offsetleft, y:obox.offsettop}]//mouse down, activate drag Oh2.onmousedown = function (event) {var event = Event || window.event; Bdrag = true; DISX = Event.clientx-obox.offsetleft; Disy = Event.clienty-obox.offsettop; Apos.push ({x:obox.offsetleft, y:obox.offsettop}) this.setcapture && this.setcapture (); return false}; Drag Start Document.onmousemove = function (event) {if (!bdrag) return; var event = Event | | window.event; var IL = Event.clientx-disx; var IT = Event.clienty-disy; var MaxL = document.documentelement.clientwidth-obox.offsetwidth; var maxt = document.documentelement.clientheight-obox.offsetheight; Il = il < 0? 0:il; Il = il > maxL? Maxl:il; it = it < 0? 0:it; it = it > maxt? Maxt:it; OBox.style.marginTop = OBox.style.marginLeft = 0; Obox.stylE.left = IL + "px"; OBox.style.top = IT + "px"; Apos.push ({x:il, y:it}) status (); return false}; Mouse release, end drag document.onmouseup = Window.onblur = Oh2.onlosecapture = function () {Bdrag = false; Oh2.releasecapture && oh2.releasecapture (); Status ()}; Playback drag Trajectory Oa.onclick = function () {if (apos.length = 1) return; var timer = setinterval (function () {var oPos = Apos.pop (); OPos? (OBox.style.left = opos.x + "px", OBox.style.top = Opos.y + "px", Status ()): Clearinterval (Timer)}, 30); This.focus = false;//Remove link dashed return false}; Block bubbling Oa.onmousedown = function (event) {(Event | | window.event). cancelbubble = true}; Listener status Function status () {aspan[0].innerhtml = Bdrag; aspan[1].innerhtml = Obox.offsettop; aspan[2].innerhtml = Obox.offsetleft}//Initial call status ()}; </script> </pead> <body> <div id= "box" > <p> click Playback drag Trajectory </p> <p><strong> ;D RAG:</STRONG><SPAN></SPAN></p> <p><strong>offsetTop:</strong><span></span></p> <p>< strong>offsetleft:</strong><span></span></p> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
