js可拖动的后台界面

// ************************ 拖动 *********************************
    function setdrag(e){
            var drag_flag = true; 
            var begin_x = getx(e);
            //添加蒙板
            createmask();
            //添加半透明拖动条
            createsplitdiv();

    function getx(e){
            if(window.event) e = window.event;
            return (e.x || e.clientx);
    }        

    function createsplitdiv(){
        //半透明的拖动条
        var _top = $doc("toparea").offsetheight +"px";
        var _left = $doc("dragbar").offsetleft +"px";;
        var _height = $doc("dragbar").offsetheight +"px";;

        var splitdivcss="position:absolute;width:6px;height:"+_height+";top:"+_top+";left:"+_left+";cursor:col-
resize;background-color:#cccccc;overflow:hidden;z-index:10010;filter:alpha(opacity=50);opacity:0.5;";
        var _splitdiv = document.createelement("div");
        _splitdiv.id = "splitdiv";
        _splitdiv.style.csstext = splitdivcss;

        document.body.appendchild(_splitdiv);

    }    
    function createmask(){
            try{

                //创建背景
                var rootel=document.documentelement||document.body;
                var docheight=((rootel.clientheight>rootel.scrollheight)?
rootel.clientheight:rootel.scrollheight)+"px";
                var docwidth=((rootel.clientwidth>rootel.scrollwidth)?rootel.clientwidth:rootel.scrollwidth)
+"px";
                var 
shieldstyle="position:absolute;top:0px;left:0px;width:"+docwidth+";height:"+docheight+";background:#cccccc;z-
index:10000;filter:alpha(opacity=0);opacity:0";
                var _shield = document.createelement("div");
                _shield.id = "shield";
                _shield.style.csstext = shieldstyle;
                document.body.appendchild(_shield);
            }catch(e){}
        }
        //拖动时执行的函数
        document.onmousemove = function(e){
            try{
                if(drag_flag){
                        var now_x = getx(e);
                        var _pv = parseint($doc("splitdiv").style.left)+ now_x - begin_x;
                        $doc("splitdiv").style.left = _pv +"px";
                         begin_x = now_x;
                }else{
                        $doc("leftshow").style.width = $doc("splitdiv").style.left;
                        document.body.removechild($doc("shield"));
                        document.body.removechild($doc("splitdiv"));
                        // 调整页面布局
                        resizepage();
                }
            }catch(e){}
        }

        document.onmouseup = function(){
            try{
                if(drag_flag){
                    //设定拖动条的位置（设定左侧的宽度）
                    $doc("leftshow").style.width = $doc("splitdiv").style.left;
                    document.body.removechild($doc("shield"));
                    document.body.removechild($doc("splitdiv"));
                    // 调整页面布局
                    resizepage();
                }
                drag_flag = false;
                begin_x = null;
            }catch(e){}
        }

    }

    if(window.attachevent){
          window.attachevent("onload",function(){resizepage();});
          window.attachevent("onresize",function(){resizepage();});
    }
  if(window.addeventlistener){
       window.addeventlistener("load",function(){resizepage();},true);
       window.addeventlistener("resize",function(){resizepage();},true);
  }

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>可拖动的后台界面__jb51.net</title> <style type="text/css"> *{ margin: 0px; font-size:12px; font-family:"宋体"; color:#000000; } html,body{ height: 100%; width: 100%; overflow:hidden; background-color:#eeeeef; } img{ padding:0px; margin:0px; vertical-align:middle; border:0px; } .f_left{ float:left; clear:right; } .f_right{ float:right ; clear:right; } .toparea{ width:100%; height:60px; } .logoarea{ float:left; width:100%; height:36px; background-color:#eeeeef; } .toolbararea{ float:left; width:100%; height:24px; background-color:#eeeeef; } .bottomarea{ height:25px; line-height:25px; background-color:#eeeeef ; } .leftbg{ background:#ffffff; border:1px solid #bebebe; } .maincontent{ padding:0px; } .content_show{ float:left; clear:right; height:100%; width:auto; margin:0px; padding:0px; background-color:#ffffff; border:1px solid #bebebe; } .splitbar{ width:6px; height:100%; cursor:col-resize; } </style> <div id="toparea" class="toparea"> <div class="logoarea"> </div> <div class="toolbararea"> </div> </div> <div id="maincontent"> <div class="content_show" id="center" style="overflow-y:auto;overflow-x:hidden;"> <iframe src="" width="100%" height="100%" frameborder="1"></iframe> </div> </div>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]