拖动层

时间：2021-04-14 09:03:42|栏目：JavaScript代码|点击：次

<html> <head> <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> </head> <body>     <table id="win01" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0">         <tr>             <td class="vwintit" forid="win01">&nbsp;窗口一</td>         </tr>         <tr>             <td class="vwinbody" forid="win01">&nbsp;</td>         </tr>     </table>     <table id="win02" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0">         <tr>             <td class="vwintit" forid="win02">&nbsp;窗口二</td>         </tr>         <tr>             <td class="vwinbody" forid="win02">&nbsp;</td>         </tr>     </table>     <table id="win03" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0">         <tr>             <td class="vwintit" forid="win03">&nbsp;窗口三</td>         </tr>         <tr>             <td class="vwinbody" forid="win03">&nbsp;</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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：JS简单获得节点元素的方法示例

栏目：JavaScript代码

下一篇：JavaScript实现动态添加Form表单元素的方法示例

本文标题：拖动层

本文地址：http://www.codeinn.net/misctech/100903.html

更多JavaScript代码

JavaScript代码

拖动层

阅读排行

推荐教程