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);
  }</p> <p><title><a href="https://www.kunjuke.com/tag/6959/" title="可拖动" target="_blank">可拖动</a>的后台界面_北冥有鱼_jb51.net</title> </p> <p> *{<br /> margin: 0px;<br /> font-size:12px;<br /> font-family:"宋体";<br /> color:#000000;<br /> }<br /> html,body{<br /> height: 100%;<br /> width: 100%;<br /> overflow:hidden;<br /> background-color:#EEEEEF;<br /> }<br /> img{<br /> padding:0px;<br /> margin:0px;<br /> vertical-align:middle;<br /> border:0px;<br /> } </p> <p>.f_left{<br /> float:left;<br /> clear:right;<br /> }<br /> .f_right{<br /> float:right ;<br /> clear:right;<br /> }<br /> .topArea{<br /> width:100%;<br /> height:60px;<br /> }<br /> .logoArea{<br /> float:left;<br /> width:100%;<br /> height:36px;<br /> background-color:#EEEEEF;<br /> }<br /> .toolbarArea{<br /> float:left;<br /> width:100%;<br /> height:24px;<br /> background-color:#EEEEEF;<br /> }<br /> .bottomArea{<br /> height:25px;<br /> line-height:25px;<br /> background-color:#EEEEEF ;<br /> }<br /> .leftBg{<br /> background:#ffffff;<br /> border:1px solid #BEBEBE;<br /> }<br /> .mainContent{<br /> padding:0px;<br /> }<br /> .content_show{<br /> float:left;<br /> clear:right;<br /> height:100%;<br /> width:auto;<br /> margin:0px;<br /> padding:0px;<br /> background-color:#ffffff;<br /> border:1px solid #BEBEBE;<br /> } </p> <p>.splitBar{<br /> width:6px;<br /> height:100%;<br /> cursor:col-resize;<br /> } </p> <p>  <br />   </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
• js 可拖动列表实现代码
• 可拖动可改变大小div的实现代码
• Raphael带文本标签可拖动的图形实现代码