简言
最近有项目,左侧边栏树结构层级太深,导致显示不全,在右侧有空余区域的情况下,希望可以动态改变左侧栏的宽度。
ok,莱茨狗!!!
实现
实现思路
- 获取相应的dom
- 使用鼠标移动、按下、弹起事件
- 获取移动方向、移动长度
- 动态改变左侧栏和右侧栏宽度
- 完成
代码
<!--
* @Date: 2022-12-16 16:19:41
* @LastEditors: zhangsk
* @LastEditTime: 2022-12-16 17:37:13
* @FilePath: \html\左右横拉效果.html
* @Label: Do not edit
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态侧边栏</title>
<style>
* {
padding: 0;
margin: 0
}
html,
body {
width: 100%;
height: 100vh;
}
#box {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100vh;
}
#left {
flex-shrink: 0;
width: 200px;
position: relative;
border-right: 1px solid #ccc;
}
#right {
flex: 1;
width: calc(100% -200px);
background-color: aquamarine;
}
#resize-box {
position: absolute;
top: 0;
right: 0;
width: 5px;
height: 100%;
overflow: hidden;
}
#resize {
z-index: 2;
position: absolute;
top: 100px;
right: -5px;
width: 5px;
height: 50px;
border-radius: 2px;
background-color: rgb(177, 175, 175);
cursor: col-resize;
transition: right 0.5s;
}
#resize-box:hover {
background-color: transparent;
}
#resize-box:hover #resize {
right: 0px;
}
.resize-right {
right: 0px;
}
</style>
</head>
<body>
<div id="box">
<div id="left">
左侧栏
<div id="resize-box">
<div id="resize"></div>
</div>
</div>
<div id="right">
右侧栏
</div>
</div>
<script>
// 获取dom
const leftDOM = document.getElementById('left')
const rightDOM = document.getElementById('right')
const resizeDOM = document.getElementById('resize')
//初始移动宽度
let startX = leftDOM.clientWidth
// 移动长度
let len = 0
//移动函数
const moveFn = (event) => {
len = event.clientX - startX
// 限制最大宽度
if (leftDOM.clientWidth >= 450 && len > 0) {
len = 0
}
// 限制最小宽度
if (leftDOM.clientWidth <= 100 && len < 0) {
len = 0
}
leftDOM.style.width = leftDOM.clientWidth + len + 'px'
rightDOM.style.width = rightDOM.clientWidth - len + 'px'
startX = event.clientX
}
// 鼠标按下resize事件
const mousedownFn = (e) => {
startX = e.clientX
// 启动鼠标移动事件
document.addEventListener('mousemove', moveFn)
// 显示resize
resizeDOM.style.right = 0
}
resizeDOM.addEventListener('mousedown', mousedownFn)
//鼠标弹起事件
document.addEventListener('mouseup', () => {
//清除事件
document.removeEventListener('mousemove', moveFn)
// 隐藏resize
resizeDOM.style.right = -5 + 'px'
})
</script>
</body>
</html>
效果
结语
这里只是简单实现了效果,你可以根据思路实现封装(滑动方向、滑动距离限制等)。