拖动层_javascript技巧

<title>拖动层</title> <style> td{font-size:12px;} /*模拟窗体*/ .vwin{ position:absolute; border-top: 2px outset buttonhighlight; border-left: 2px outset buttonhighlight; border-bottom: 2px outset buttonshadow; border-right: 2px outset buttonshadow; } .vwintit{height:18px;background-color:#000099;color:#ffffff;font-weight:bold;cursor:move;} .vwinbody{background-color:#D6D3CE;} </style> <table id="win01" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win01"> 窗口一</td> </tr> <tr> <td class="vwinbody" forid="win01"> </td> </tr> </table> <table id="win02" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win02"> 窗口二</td> </tr> <tr> <td class="vwinbody" forid="win02"> </td> </tr> </table> <table id="win03" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="vwintit" forid="win03"> 窗口三</td> </tr> <tr> <td class="vwinbody" forid="win03"> </td> </tr> </table> <script> //This javascript was writen by dron var md=false,mobj,ox,oy,index=1000; function document.onmousedown(){ winfocus(); if(event.srcElement.className=="vwintit") { md = true; mobj = document.getElementById(event.srcElement.forid); ox = mobj.offsetLeft - event.x; oy = mobj.offsetTop - event.y; } } document.onmouseup=function(){md=false;} function document.onmousemove() { if(md) { mobj.style.left = event.x + ox; mobj.style.top = event.y + oy; } } function winfocus() { fobj=document.getElementById(event.srcElement.forid); if(fobj==null){return false} if(fobj.style.zIndex!=index) { index = index + 1; fobj.style.zIndex=index; } } document.onclick=winfocus; </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]