实现拖动竖线调整左侧菜单部分的宽度
- 思路:点击tree和content中间这条线时记录当前鼠标位置,当鼠标抬起时再次记录位置并且重新设置tree部分的宽度。
- 页面组成:页面由三部分组成:top.html 一级菜单部分,tree.html 左侧菜单部分,content.html主要内容部分。最外层是一个main.html, 我们要实现拖动tree和content之间线改变tree部分的宽度
- 具体实现:
– 要定位到这条线可以在tree.html或content.html实现,我写在content中,在content页面的最左侧写一条竖线,鼠标移入换成灰色样式+左右箭头,鼠标移出换为之前颜色,我写了一个toggle方法改变颜色。
<div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)">
–在这条线上鼠标点击记录当前位置,在整个body鼠标按键抬起时设置宽度。
<body onmouseup="setWidth(event)">
//div修改如下
<div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)" onmousedown="getCurrentMouseLocation(event)"></div>
– 这样就可以实现拖动改变宽度,但有时会失效,经过反复验证后发现,如果content页面有文字而拖动过程中恰好选中了文字,那本次的拖动改变大小可以实现,但是下一次就不能。解决方案是在鼠标点击记录好位置后设置页面元素不能被选中,等鼠标按键抬起恢复可以选中。
- 完整代码部分
main.html(三个带id的iframe )
<iframe id="top" src="top.html" style="width: calc(100% - 2px);height:80px"></iframe>
<iframe id="tree_menu" src="tree.html" style="width: 200px;height:calc(100% - 84px)"> </iframe>
<iframe id="content" src="content.html" style="width: calc(100% - 204px);height:calc(100% - 84px)"></iframe>
content.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.left_bar {
margin-left: 2px;
height:100%;width:3px;margin-right: 30px;cursor:e-resize;float:left;
}
html,body{
height: 100%;
width: 100%;
margin: 0;
}
</style>
</head>
<body onmouseup="setWidth(event)">
<div class="left_bar" onmouseover="toogleColor(this)" onmouseout="toogleColor(this)" onmousedown="getCurrentMouseLocation(event)"></div>
content area
<script>
//更换颜色
function toogleColor(e){
e.style.backgroundColor = (e.style.backgroundColor=="")?e.style.backgroundColor="lightgrey":e.style.backgroundColor="";
}
//初始位置
var x_start = 0;
//改变标志
var moveSwitch = false;
//鼠标点击
function getCurrentMouseLocation(event){
let event = event || window.event;
x_start = event.clientX;
//设置需要改变宽度
moveSwitch = true;
//设置页面不可选中
document.body.onselectstart=function(){return false;};
}
//鼠标抬起设置宽度
function setWidth(event) {
//只有鼠标点击了拖动div后才进行一下操作
if (moveSwitch){
let event = event || window.event;
let x_current = event.clientX;
let x_location = 0;
x_location += (x_current - x_start);
//设置最大宽度防止右边太小变形,不需要可以去掉
x_location = (x_location>270)?270:x_location;
let normalWidth = top.frames["tree_menu"].style.width;
let width = Number(normalWidth.replace('px',''));
width+=Number(x_location);
//获取tree所在的iframe,设置宽度
//如果是frameset 替换为 top.frames["content"].cols = width+ ",*";
top.frames["content"].style.width=width+'px';
moveSwitch = false;
}
//恢复页面可选中
document.body.onselectstart=function(){return true;};
}
</script>
</body>
</html>