************* ********************
Function setDrag (e ){
Var drag_flag = true;
Var begin_x = getX (e );
// Add a mask
CreateMask ();
// Add a translucent drag bar
CreateSplitDiv ();
Function getX (e ){
If (window. event) e = window. event;
Return (e. x | e. clientX );
}
Function createSplitDiv (){
// Translucent drag bar
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.css Text = splitDivCss;
Document. body. appendChild (_ splitDiv );
}
Function createMask (){
Try {
// Create a background
Var rooteltaildocument.doc umentElement | 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.css Text = shieldStyle;
Document. body. appendChild (_ shield );
} Catch (e ){}
}
// The function executed when dragging
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 "));
// Adjust the page layout
ResizePage ();
}
} Catch (e ){}
}
Document. onmouseup = function (){
Try {
If (drag_flag ){
// Set the position of the drag bar (set the width on the left)
$ Doc ("leftShow"). style. width = $ doc ("splitDiv"). style. left;
Document. body. removeChild ($ doc ("shield "));
Document. body. removeChild ($ doc ("splitDiv "));
// Adjust the page layout
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 );
}<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8 "> <title> drag-and-drop background interface _ script house _ 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 # Bebebebe ;}. 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> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]