div 拖动,最小化,归位,最大化,关闭

本文介绍了一个使用HTML和JavaScript实现的可拖动DIV组件及页面自适应大小的功能。通过JavaScript函数实现了DIV的拖拽操作、大小调整、位置锚定等功能,并确保了页面在不同分辨率下都能良好显示。

    做项目累了,整理下之前写得代码,有些地方还有些bug,不过效果还不错。

 <html>
  <head>
   <script src="xxx.js">
  
    setsize();
 window.onresize = setsize;  
   </script> 
 <body onLoad="init()">  
 
  <div  id="gis"  style="overflow:auto;width:100%;height:100%; z-index:1">  
   <img src="开发区.jpg" width="100%" height="100%"/>
   <div id="menu" style="width:50px; height:60px; position:absolute; top:50px; left:2px; z-index:22; border:solid;">
     <table width="100%" height="100%">
   <tr><input type="button" value="div1" onClick="opendiv('table')"/></tr>
   <tr><input type="button" value="div2" onClick="opendiv('search')"/></tr>
   <tr><input type="button" value="归位" onClick="guiwei()"/></tr>
  </table>
   </div>
  
   <div id="table" style="width:200px; height:200px; position:absolute; top:20px; left:20px; z-index:2; display:block;"
        onMouseDown="return drag(this,event);">
  <div style="width:200px; height:20px; border:solid;">
    <table width="100%" height="100%">
     <tr>
     <td><input type="button" value="最小" onClick="smalldiv(this,'tablebody')"/></td>
     <td><input type="button" id="tableding" value="锚定" onClick="closedrag(this,'table')"/></td>
     <td><input type="button" value="关闭" onClick="closediv('table')"/></td>
     </tr>
    </table>
  </div>
  <div id="tablebody" style="width:200px; height:180px; z-index:2; border:solid; display:block;">
  </div>
 </div>
 
 <div id="search" style="width:400px; height:400px; position:absolute; top:100px; left:100px; z-index:2; display:block;"
        onMouseDown="return drag(this,event);">
  <div style="width:400px; height:20px; border:solid;">
    <table width="100%" height="100%">
     <tr>
     <td><input type="button" value="最小" onClick="smalldiv(this,'searchbody')"/></td>
     <td><input type="button" id="searchding" value="锚定" onClick="closedrag(this,'search')"/></td>
     <td><input type="button" value="关闭" onClick="closediv('search')"/></td>
     </tr>
    </table>
  </div>
  <div id="searchbody" style="width:400px; height:380px; border:solid; display:block;">
  </div>
 </div>
         
  </div>  
 
 </body>
 
 </html>   
 

 

js文档里的内容:

// JavaScript Document
      var key = null;
   var tablewidth,tableheight,tabletop,tableleft,searchwidth,searchheight,searchtop,searchleft;
  //初始化,保存div初始值
  function init()
  {
    var tablediv = document.getElementById("table");
    var searchdiv = document.getElementById("search");
   
    tablewidth = tablediv.style.width;
    tableheight = tablediv.style.height;
    tabletop = tablediv.style.top;
    tableleft = tablediv.style.left;
   
    searchwidth = searchdiv.style.width;
    searchheight = searchdiv.style.height;
    searchtop = searchdiv.style.top;
    searchleft = searchdiv.style.left;
   }  
     //自动适应大小函数
     function setsize()
  {
    var divgis = document.getElementById("gis");
   
    if((document.body)&&(document.body.clientWidth))
       divgis.style.width = document.body.clientWidth;
    if((document.body)&&(document.body.clientHeight))
       divgis.style.height = document.body.clientHeight;
   
    if( document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight)
    {
      divgis.style.height = document.documentElement.clientHeight;
   divgis.style.width = document.documentElement.clientWidth;
    }
  }
  //实现可拖动div效果
         function $(id)
            {
                return document.getElementById(id);
            };
            function drag(element,e)
            {
      var btnid = element.id + "ding";
      if(document.getElementById(btnid).value == "解除")
         return false;
     
       e=e||event;
                setFocus(element.id);
                if(document.addEventListener)
                {
                    document.addEventListener("mousemove",startDrag,true);
                    document.addEventListener("mouseup",stopDrag,true);
                }
                else
                {
                    document.onmousemove=startDrag;
                    document.onmouseup=stopDrag;
                }
                var deltaX=e.clientX-parseInt(element.style.left);
                var deltaY=e.clientY-parseInt(element.style.top);
                function startDrag(e)
                {
                    e=e||event;
                    element.style.left=e.clientX-deltaX+"px";
                    element.style.top=e.clientY-deltaY+"px";
                };
               
                function stopDrag()
                {
                    if(document.removeEventListener)
                    {
                        document.removeEventListener("mousemove",startDrag,true);
                        document.removeEventListener("mouseup",stopDrag,true);   
                    }
                    else
                    {
                        document.onmousemove="";
                        document.onmouseup="";
                    }
                   
                    var oDiv=document.getElementsByTagName("div");
                 };
    
     return true;
            };
           
            function setFocus(elementId)
            {
                var oDiv=document.getElementsByTagName("div");
                for(var i=0;i<oDiv.length;i++)
                {
                    if(oDiv[i].id==elementId)
                    {
                        oDiv[i].style.zIndex=20;
                    }
                    else
                    {
                        oDiv[i].style.zIndex=10;
                    }
                }
            };
      //对其他div的操作
   function opendiv(id)
   {
     document.getElementById(id).style.display = 'block';
   } 
  
    function closediv(id)
   {
     var a = document.getElementById(id);
     document.getElementById(id).style.display = 'none';
  if(id == 'table')
  {
    a.style.width = tablewidth;
    a.style.height = tableheight;
    a.style.top = tabletop;
    a.style.left = tableleft;
  }
  if(id == 'search')
  {
    a.style.width = searchwidth;
    a.style.height = searchheight;
    a.style.top = searchtop;
    a.style.left = searchleft;
   }
   } 
        
      function smalldiv(e,id)
   {
     var a = document.getElementById(id);
     if(a.style.display == 'none')
  {
       a.style.display = 'block';
          e.value = "最小";
  }
  else
  {
       a.style.display = 'none';
          e.value = "最大";
  }     
  
   } 
   //锚定函数,阻止拖动
   function closedrag(e,id)
   {
     if(e.value == "锚定")
  {
    e.value = "解除";
     }
   else
  {
          e.value = "锚定";
  }
    }
  function guiwei()
  {
    var a = document.getElementById("table");
     a.style.width = tablewidth;
  a.style.height = tableheight;
  a.style.top = tabletop;
  a.style.left = tableleft;
  
    a =  document.getElementById("search");
     a.style.width = searchwidth;
  a.style.height = searchheight;
  a.style.top = searchtop;
  a.style.left = searchleft;
  }   
      

转载于:https://www.cnblogs.com/lzlynn/archive/2008/07/27/1254193.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值