05#Web 实战：可拖拽的侧边栏
效果演示图
可拖拽的左、右侧边栏的使用情况还是挺多的，博客园后台管理的左侧边栏就可以拖拽哟！效果演示如下图：
HTML 代码
<div class="container">
<div class="left">
<div class="resize-bar"></div>
</div>
<div class="right">
<div class="resize-bar"></div>
</div>
</div> CSS 代码
html,
body {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 0 !important;
margin: 0 !important;
}
.container {
width: 80vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
position: relative;
width: 100px;
height: 100%;
background-color: rgb(160, 212, 233);
}
.left .resize-bar {
position: absolute;
top: 0;
left: 100px;
width: 3px;
height: 100%;
opacity: 0;
}
.left .resize-bar:hover {
cursor: col-resize;
opacity: 1;
background-color: rgb(210, 85, 50);
}
.right {
position: relative;
width: 100px;
height: 100%;
background-color: rgb(36, 107, 214);
}
.right .resize-bar {
position: absolute;
top: 0;
right: 100px;
width: 3px;
height: 100%;
opacity: 0;
}
.right .resize-bar:hover {
cursor: col-resize;
opacity: 1;
background-color: rgb(211, 36, 164);
} 拖拽右侧边栏
往左拖拽
如上图，红色方框圈住的部分是 container 的区域，即鼠标移动范围和侧边栏宽度变化的计算区域。
右侧边栏边缘处在整个 container 的 x 坐标是整个 container 的宽度减去右侧边栏的宽度，命名为 startWidth。假如，container 的宽度是 1355 px，右侧边栏的宽度是 100 px，那么 startWidth = 1355px - 100px = 1255px。
鼠标拖拽右侧边栏的左边缘处往左移动，得到一个鼠标监听事件，获取其数值：event.pageX。假如 event.pageX = 1200px，那么右侧边栏应该移动：
$$
moveStep = startWidth - event.pageX = 1255px - 1200px = 55px
$$
因此，右侧边栏由原来的 100px 增加 55px 得到的新宽度是 155px：
$$
shiftWidth = moveStep + container.offsetLeft + right.clientWidth
$$
const container = document.querySelector(".container");
const right = document.querySelector(".right");
const rightResizeBar = document.querySelector(".right .resize-bar");
function moveRightBar(event) {
setTimeout(() => {
let startWidth = container.clientWidth - right.clientWidth;
let moveStep = startWidth - event.pageX;
let shiftWidth = moveStep + container.offsetLeft + right.clientWidth;
right.style.width = shiftWidth + "px";
rightResizeBar.style.right = shiftWidth + "px";
}, 200);
} pageX、clientX 都是一样的数值，用哪个都可以。计算过程中有一个
container.offsetLeftcontainer.offsetLeft往右拖拽
startWidth 还是 1255px。鼠标拖拽右侧边栏的左边缘处 往右移动 ，得到一个鼠标监听事件，获取其数值：event.pageX。假如 event.pageX = 1380px，那么右侧边栏应该移动：
$$
moveStep = startWidth - event.pageX = 1255px - 1280px = -25px
$$
因此，右侧边栏由原来的 100px 增加 -25px 得到的新宽度是 75px。
添加监听器
只有当用户鼠标按下拖拽的控制器（rightResizeBar）时，才开启鼠标在 container 中移动的事件，事件函数为 moveRightBar。moveRightBar 计算右侧边栏的移动距离。
当用户在 container 范围内或在 rightResizeBar 元素内鼠标放下时，就移除 container 的事件：
// 1. 鼠标按下 rightResizeBar 元素，开启 container 的事件监听
rightResizeBar.addEventListener("mousedown", () => {
container.addEventListener("mousemove", moveRightBar);
});
// 2. 当鼠标从 rightResizeBar 放下时，取消监听
rightResizeBar.addEventListener("mouseup", () => {
container.removeEventListener("mousemove", moveRightBar);
});
// 3. 当鼠标从 container 范围内放下时，取消监听
container.addEventListener("mouseup", () => {
container.removeEventListener("mousemove", moveRightBar);
}); 拖拽左侧边栏
左侧边栏的拖拽代码就非常简单了。鼠标不管从哪个方向移动，都是以浏览器左上角的原点为起点计算的鼠标 x、y 坐标值。而左侧边栏的左拖拽和右拖拽正好处于浏览器的左边部分，鼠标往左或往右拖拽多少 px，侧边栏的宽度就是
event.pageX - container.offsetLeft function moveLeftBar(event) {
setTimeout(() => {
let shiftWidth = event.pageX - container.offsetLeft;
left.style.width = shiftWidth + "px";
leftResizeBar.style.left = shiftWidth + "px";
}, 200);
} 添加监听器
leftResizeBar.addEventListener("mousedown", () => {
container.addEventListener("mousemove", moveLeftBar);
});
leftResizeBar.addEventListener("mouseup", () => {
container.removeEventListener("mousemove", moveLeftBar);
});
container.addEventListener("mouseup", () => {
container.removeEventListener("mousemove", moveLeftBar);
}); 源码仓库
- GitHub 源码地址
- 在线预览地址