天天看点

javascript中拖动层

<html>  

  <head>  

<script   language="javascript">  

  function   Pos(x,y)  

  {  

   this.x   =   x;  

   this.y   =   y;  

  }  

  var   currentMenuItem;  

  var   currentMenuItemPos   =   new   Pos(   0,0   );  

  function   mveaablediv()  

  {  

   document.body.ondragenter   = function()  

   {  

   window.event.returnValue   =   false;  

   }  

   document.body.ondragover   =function()  

   {  

   window.event.returnValue   =   false;  

   }  

    //

 var   item_div   =   document.createElement("div");  

    item_div.style.position   =   "absolute"  

    //item_div.style.height   =   config.Item_div_height   +   "px";  

    item_div.style.width   =   100   +   "px";  

    item_div.style.left =   currentMenuItemPos.x   +document.body.scrollLeft   +"px";  

    item_div.style.top =   currentMenuItemPos.y   +   document.body.scrollTop   +"px";  

    item_div.innerHTML   =   "<TABLE   style='position:absolute;'   class='itemDivCaption'     cellSpacing='0'   cellPadding='0'   ><tr><td   height='16'   width='16'><img   οndragstart='currentMenuItem.dragDrop();'   title='按住左键拖动窗口'   style='cursor:move;'   move.gif'></td><td   width='200'   bgcolor=blue   οnmοusedοwn='currentMenuItem.dragDrop();'   align='center'   style='cursor:default;'><strong></strong></td><td   width='72px;'   align='right'><button   οnclick='javascript:currentMenuItem.content.style.zoom   =   parseFloat(currentMenuItem.content.style.zoom)   *   1.2;currentMenuItem.style.width=parseFloat(currentMenuItem.style.width)*1.2'   title='放大'><img   align='middle'   zoom_in.gif'></button><button   οnclick='javascript:currentMenuItem.content.style.zoom   =   parseFloat(currentMenuItem.content.style.zoom)   /   1.2;currentMenuItem.style.width=parseFloat(currentMenuItem.style.width)/1.2'   title='缩小'><img   align='middle'     /zoom_out.gif'></button><button   οnclick='javascript:if(currentMenuItem!=null){currentMenuItem.innerHTML=/"/";removeGraphic(currentMenuItem);currentMenuItem=null;CollectGarbage();}'     title='点击关闭'><img   align='middle'   close.gif'   ></button></td></tr></table>";  

    var   content   =   document.createElement("div");  

    content.style.zoom   =   1;  

    item_div.appendChild(content);  

    item_div.content   =   content;  

    item_div.ondragstart   =   function()  

 {  

  currentMenuItemPos   =   new   Pos(   event.offsetX,event.offsetY   );  

  }  

 item_div.ondrag   =   function()  

   {  

  if(currentMenuItem!=null)  

  {    

     this.style.left =   parseInt(this.style.left)   +   event.offsetX-   currentMenuItemPos.x;  

     this.style.top =   parseInt(this.style.top)     +   event.offsetY   -   currentMenuItemPos.y;  

    }    

 }  

    item_div.ondragend   =   function()  

    {  

   currentMenuItemPos.x   =   parseInt(this.style.left)   -   parseInt(document.body.scrollLeft);    

   currentMenuItemPos.y   =   parseInt(this.style.top)   -   parseInt(document.body.scrollTop);  

   if(currentMenuItemPos.x   <   0   )   //防止将窗口拖出去之后拖不回来  

   {  

  currentMenuItemPos.x   =   0;  

   }  

   if(currentMenuItemPos.y   <   0   )   //防止将窗口拖出去之后拖不回来  

   {  

   currentMenuItemPos.y   =   0;  

   }  

  window.event.returnValue   =   false;  

  }  

  currentMenuItem   =   item_div;  

  document.body.appendChild(   item_div   );  

  }  

  </script>  

  </head>  

  <body   οnlοad="mveaablediv()">  

  </body>  

  </html>  

继续阅读