<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移动分割窗口</title>
<style type="text/css">
.wrap {
border: 1px solid red;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-between;
}
.left {
width: calc(35% - 10px);
background-color: aqua;
height: 100%;
}
.middle {
text-align: center;
line-height: 100vh;
}
.middle span:hover {
cursor: w-resize;
}
.right {
width: calc(65% - 10px);
background-color: chocolate;
height: 100%;
}
</style>
</head>
<body onload="initLayout();">
<div class="wrap">
<div class="left" id="leftLayout">
<div style="margin-top: 300px;text-align: center;"><span>默认宽度:35%</span>移动实时宽度：<span id="ls"></span>px</div>
</div>
<div class="middle" id="middleLayout" style="width:20px;text-align: center;"><span>|||</span></div>
<div class="right" id="rightLayout">
<div style="margin-top: 300px;text-align: center;"><span style="margin-right:10px;">默认宽度:65%</span>移动实时宽度：<span id="rs"></span>px</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
console.log('--->>> 初始化加载..');
console.log(event);
var leftLayout = document.getElementById("leftLayout");
var middleLayout = document.getElementById("middleLayout");
var rightLayout = document.getElementById("rightLayout");
var gutterSize = 300 //限制两边最小拖拽距离
console.log(' 左侧元素 --->>>', leftLayout);
console.log(' 中间元素 --->>>', middleLayout);
console.log(' 右侧元素 --->>>', rightLayout);
middleLayout.onmousedown = function(evd) {
var leftWidth = parseInt(leftLayout.offsetWidth);
var rightWidth = parseInt(rightLayout.offsetWidth);
var evd = evd || event;
var mouseDownX = evd.clientX;
var mouseDownOffsetX = evd.offsetX;
console.log('--->>>鼠标按下的ev：', evd);
console.log('--->>> 鼠标按下的X轴：', mouseDownX);
document.onmousemove = function(ev) {
var ev = ev || event;
console.log('--->>> 鼠标移动产生的ev：', ev);
console.log('--->>> 鼠标移动的X轴：', ev.clientX);
var maxRW = parseInt(mouseDownX) + rightWidth - gutterSize; //左侧最大分割值
var maxLW = parseInt(mouseDownX) - leftWidth + gutterSize; //右侧最大分割值
var evCMX = parseInt(ev.clientX)
var newLeftWidth = leftWidth + (evCMX - parseInt(mouseDownX))
var newRightWidth = rightWidth + (parseInt(mouseDownX) - evCMX)
console.log(' 左侧宽度 --->>> ', newLeftWidth);
console.log(' 右侧宽度 --->>> ', newRightWidth);
document.getElementById("ls").innerHTML = newLeftWidth;
document.getElementById("rs").innerHTML = newRightWidth;
// 当出现负数时 or 超过允许的最大宽度时，不进行赋值
if (newLeftWidth > 0 && newRightWidth > 0 && evCMX > maxLW && evCMX < maxRW) {
console.log('---->>> 重置宽度.');
leftLayout.style.width = newLeftWidth + "px";
rightLayout.style.width = newRightWidth + "px";
}
}
document.onmouseup = function(ev) {
document.onmousemove = null;
}
}
}
</script>
</body>
</html>
网友评论