上下两栏合理布局右边自融入+上下拖拽更改两栏

2021-03-10 02:11 jianzhan
今日1中午的学习培训成效,共享1下,欢迎大神指教。
最先是合理布局,上下两栏合理布局,正中间留出可拖拽的地区。合理布局很简易,左侧1个div,右侧1个div,正中间的div是用来拖拽的。

拷贝编码
编码以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻">
<title>上下两栏拖拽更改宽度</title>
</head>
<body>
<div id="left">左边內容</div>
<div id="middle"></div>
<div id="right">
右边內容
</div>
</body>
</html>

css合理布局:选用固定不动肯定精准定位,并定下座标的方式,我觉得这类方式较为笨的,水平比较有限。

拷贝编码
编码以下:

div,body,html{margin:0; padding:0; width:100%;}
#left,#right,#middle{ height:300px; position:absolute;}
#left{width:300px; background:#ccc;}
#middle{ width:9px; background:#666;left:300px;}
#middle:hover{ cursor:w-resize;}
#right{right:0; background:#ccc; left:309px; width:auto;}

最终的js完成正中间栏的拖拽实际效果:

拷贝编码
编码以下:

    function $(id) {
return document.getElementById(id)
}
window.onload = function() {
left = $("left"), right = $("right"), middle = $("middle");
var middleWidth=9;
middle.onmousedown = function(e) {
var disX = (e || event).clientX;
middle.left = middle.offsetLeft;
document.onmousemove = function(e) {
var iT = middle.left + ((e || event).clientX - disX);
var e=e||window.event,tarnameb=e.target||e.srcElement;
maxT=document.body.clientWidth;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
middle.style.left = left.style.width = iT + "px";
right.style.width = document.body.clientWidth - iT -middleWidth + "px";
right.style.left = iT+middleWidth+"px";
return false
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
middle.releaseCapture && middle.releaseCapture()
};
middle.setCapture && middle.setCapture();
return false
};
};