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);
  }

可拖动的后台界面_我们_jb51.net

*{
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;
}

function $doc(ele){
if(typeof ele == "string" || ele instanceof String){
return document.getElementById(ele);
}
return ele;
}
//设置页面布局
function resizePage(){
var topArea = $doc("topArea");
var mainContent = $doc("mainContent");
var footer = $doc("footer");

var myHeight = document.body.clientHeight - (topArea.offsetHeight + footer.offsetHeight);
if(myHeight 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);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]