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

最新推荐文章于 2022-09-05 11:21:40 发布

转载最新推荐文章于 2022-09-05 11:21:40 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lzlynn/archive/2008/07/27/1254193.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用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;
}