Today an afternoon of learning outcomes, to share, welcoming environment.
is the first layout, two-column layout, can drag is left between places. Layout is very simple, left a div, a div, on the right in the middle of the div is used for dragging.

 code is as follows: 


<! PUBLIC DOCTYPE HTML "-/////DTD/W3C HTML 4.01 EN" "http://www.w3.org/TR/html4/strict.dtd" >
<Html>
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8" >
<Title> Drag one change the width </title>
</head>
<Body>
<Div id="left" > On the left side of the content </div>
<Div id="middle" > </div>
<Div id="right" >

the right content </div>
</body>
</html>

CSS layout: adopt fixed absolute positioning, and set coordinates method, I feel this way are stupid, the level is limited.

 code is as follows: 


div, the body and HTML {margin: 0; Padding: 0; Width: 100%; }
# leftcol, # # right, middle {height: 300 px; Position: absolute; }
# leftcol {width: 300 px; Background: # CCC; }
# middle {width: 9 px; Background: # 666; Left: 300 px; }
# middle: hover {cursor: w - resize; {}
# right right: 0; Background: # CCC; Left: 309 px; Width: auto; }

js finally achieved the bar in the middle of the drag effect:

 code is as follows: 


the function $(id) {
the return document. The getElementById (id)
}
window. The onload=function () {
left=$(" left "), right=$(" right "), middle=$(" middle ");
var middleWidth=9;
middle. Onmousedown=function (e) {
var disX=(e | | event). The clientX;
middle. Left=middle. The offsetLeft;
document. Onmousemove=function (e) {
var=middle. IT left + ((e | | event). The clientX - disX);
var=e | e | window. The event, tarnameb=e. arget | | e.s rcElement;
maxT=document. Body. ClientWidth;
iT <0 & & (iT=0);
iT > MaxT & & (iT=maxT);
middle. Style. Left=left. Style. The width=iT + "px";
right. Style. The width=document. The body. The clientWidth - iT - middleWidth + "px";
right. Style. Left iT + middleWidth +="px";

return false};
document. Onmouseup=function () {
the document. The onmousemove=null;
document. Onmouseup=null;
middle. The releaseCapture & & Middle. ReleaseCapture ()
}; .
middle setCapture & & Middle. SetCapture ();

return false};
};

# 0 - #


This concludes the body part