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"><br /><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; } </p><p>.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; } </p><p>.splitBar{ width:6px; height:100%; cursor:col-resize; } </style><p>   <p>