<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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"> 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: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> window.onload=function(){ var oBox=document.getElementById("box"); var oH=oBox.getElementsByTagName("h2")[0]; var oA=oBox.getElementsByTagName("a")[0]; var aSpan=oBox.getElementsByTagName("span"); var aPos=[{x:oBox.offsetLeft,y:oBox.offsetTop}]; var bDrag=false; var disX=disY=0; oH.onmousedown=function(ev){ var oEv=ev||window.event; bDrag=true; aPos.push({x:oBox.offsetLeft,y:oBox.offsetTop}); disX=oEv.clientX-oBox.offsetLeft; disY=oEv.clientY-oBox.offsetTop; this.setCapture&&this.setCapture(); return false; }; document.onmousemove=function(ev){ if (!bDrag) return; var oEv=ev||window.event; var iL=oEv.clientX-disX; var iT=oEv.clientY-disY; var iMaxL=document.documentElement.clientWidth-oBox.offsetWidth; var iMaxT=document.documentElement.clientHeight-oBox.offsetHeight; iL=iL<0?0:iL; iT=iT<0?0:iT; iL=iL>iMaxL?iMaxL:iL; iT=iT>iMaxT?iMaxT: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; }; document.onmouseup=window.onblur=oH.onlosecapture=function(){//window.onblur表示当前窗口失去焦点即激活了其他线程的窗口 bDrag=false; this.releaseCapture&&this.releaseCapture(); status() }; //回放 oA.onclick=function(){ var oPos=play=null; if(aPos.length==1) return; play=setInterval(function(){ oPos=aPos.pop(); oPos?(oBox.style.left=oPos.x+"px",oBox.style.top=oPos.y+"px", status()):clearInterval(play); },50); this.focus=false; return false; }; oA.onmousedown=function(ev){ (ev||window.event).cancelBubble=true; }; function status(){ aSpan[0].innerHTML=bDrag; aSpan[1].innerHTML=oBox.offsetLeft; aSpan[2].innerHTML=oBox.offsetTop; } status(); }; //心得：用bDrag来独立move和up函数（不同嵌套在down函数里） // 在临界值的处理里，先把最值算出来再和最值比较再赋值 // 三目运算符里可以写多条语句，用","隔开即可 // 赋值的时候，要考虑是否收到布局的影响。如oBox.style.left和top赋值前要先把margin值清零 // ie捕获事件：setCapture() ie释放事件捕获：releaseCapture() </script> </head> <body> <div id="box"> <h2><a href="javascript:;">点击回放拖动轨迹</a></h2> <p><strong>Drag:</strong><span></span></p> <p><strong>offsetTop:</strong><span></span></p> <p><strong>offsetLeft:</strong><span></span></p> </div> </body> </html>