通过js中的onmousedown、onmousemove、onmouseup事件水瓶分割窗口
作者：互联网
核心代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义分割窗口</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.root {
width: 100%;
height: 100%;
position: relative;
}
.left {
width: 20%;
height: 100%;
background-color: #CC0000;
position: absolute;
left: 0;
top: 0;
}
/* .center {
width: 60%;
height: 100%;
background-color: #FF8F06;
position: absolute;
left: 20%;
right: 20%;
top: 0;
}*/
.right {
width: 20%;
height: 100%;
background-color: green;
position: absolute;
right: 0;
top: 0;
}
.drag {
width: 10px;
height: 100%;
background-color: #E7E7E7;
position: absolute;
top: 0;
cursor: col-resize;
}
.left-drag {
right: 0;
}
.left-drag span {
width: 10px;
height: 10px;
color: gray;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}
.right-drag {
left: 0;
}
.col-resize {
width: 10px;
height: 10px;
color: gray;
position: absolute;
left: 50%;
top: 50%;
margin-left: -5px;
margin-top: -5px;
}
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="root ">
<!--
左侧布局
-->
<div class="left">
<div class="drag left-drag">
<span class="col-resize">||</span>
</div>
</div>
<!--
中间布局
-->
<div class="center" style="width: 60%;
height: 100%;
background-color: #FF8F06;
position: absolute;
left: 20%;
top: 0;">
</div>
<!--
右侧布局
-->
<div class="right">
<div class="drag right-drag">
<span class="col-resize">||</span>
</div>
</div>
</div>
<script>
window.onload = function () {
initDrag();
};
function initDrag() {
let divs = document.querySelectorAll('.drag');
for (let i = 0; i < divs.length; i++) {
let div = divs[i];
/*
* 给所有的.drag标签设置一个鼠标按下的监听事件
* */
div.onmousedown = function (e) {
//获取当前元素的宽度
let width = this.offsetWidth;
// 获取当前元素的父元素
let div = this.parentNode;
console.dir(div);
let className = div.className;
console.log('className:'+className);
// 获取当前鼠标按下的X轴坐标点
let downX = e.clientX;
// 获取父元素相对于窗体的位置集
let rect = div.getBoundingClientRect();
let center = document.querySelector('.center');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
console.dir(center);
let centerLeft = parseFloat(center.style.left);
console.log('centerLeft:' + centerLeft);
//centerLeft:20
// 获取网页可见区域宽
let totalWidth = document.body.clientWidth;
console.log("totalWidth:"+totalWidth);
//最大可拖拽的范围
let maxWidth = 0;
if (className === 'left'){
console.log("right.offsetWidth:"+right.offsetWidth);
maxWidth = totalWidth - right.offsetWidth;
} else {
console.log("left.offsetWidth:"+left.offsetWidth);
maxWidth = totalWidth - left.offsetWidth;
}
console.log("maxWidth:"+maxWidth);
// 计算出百分比
maxWidth = parseFloat(maxWidth/totalWidth*100);
//当前元素的半分比宽度（两个栏杆的宽度）
let newWidth = (width/totalWidth*100);
console.log("newWidth:"+newWidth);
/*
鼠标移动的监听
* */
document.onmousemove = function (e) {
//获取移动的X轴坐标点
let moveX = e.clientX;
//计算出移动移动距离差
let differenceValue;
if (className === 'left'){
differenceValue = moveX - downX;
} else {
differenceValue = downX - moveX;
}
console.log("differenceValue:"+differenceValue);
// 计算出百分比数据
differenceValue = parseFloat(differenceValue/totalWidth*100);
console.log("differenceValue:"+differenceValue);
//differenceValue:18
console.log(rect);
console.log("rect.width:"+rect.width);
let right = (rect.width/totalWidth*100) + differenceValue;
console.log("right:"+right);
//21.19287845477387
//限制最大拖拽的范围
if (right>=maxWidth){
right = maxWidth;
}
if (right<=newWidth){
right = newWidth;
}
if (className === 'left'){
// 获取左侧的宽度
let cd = centerLeft + differenceValue;
// 如果这宽度<= 栏杆的宽度，那么就设置为栏杆的宽度（防止超过拖拽范围）
if (cd<=newWidth){
cd = newWidth;
}
let left2 = 0;
//限制往右拖拽的区域
if (cd>=maxWidth){
left2 = maxWidth;
}else {
left2 = cd;
}
let left = left2 +'%';
console.log("left:"+left);
// 更新中心区域的left值
center.style.left = left;
} else {
center.style.right = right+'%';
}
//实时更新当前拖拽元素的父元素的宽度
div.style.width = right+'%';
//实时更新中间元素的宽度 = 最大的宽度 - 拖拽元素的父元素的宽度
center.style.width = (maxWidth - right ) + '%';
};
// 鼠标松开的事件监听
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
}
</script>
</body>
</html>
效果图：
标签：right,console,log,onmousedown,width,let,onmouseup,onmousemove,left 来源： https://blog.csdn.net/qq_35366269/article/details/98080425