可移动的侧边栏

最新推荐文章于 2023-09-02 21:51:29 发布

zxf_CN

最新推荐文章于 2023-09-02 21:51:29 发布

阅读量650

点赞数

分类专栏： html css js 文章标签：可移动的侧边栏

原文链接：https://www.bilibili.com/video/BV1L54y197vj

版权

js 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

还是老样子，学习 CodingStartup起码课的实现可调侧栏（点击传送门，可以观看哔哩哔哩up 的视频），就来写文章了，虽然不是什么很好的文章，但我就是要写，哈哈哈。

今天实现的效果是可移动的侧栏，鼠标点击拖动，页面重新加载时，可以记录上一次调整的大小，让侧栏保持和上一次调整的大小一致。以下是修改图：

在这里插入图片描述
开始吧！

关键代码：

鼠标点击 mousedown；
鼠标移动 mousemove；
鼠标松开 mouseup；
让页面元素，不能被鼠标选中的样式：user-select:none；
鼠标样式： cursor: col-resize;
获取页面元素的属性： window.getComputedStyle(element).属性
解绑事件： element.removeEventListener('事件类型',事件名)；

步骤：

1、鼠标点击时，记录鼠标的 x 坐标，并获取左侧栏的宽度；在鼠标点击事件中，绑定2个事件（鼠标移动和鼠标松开）。

2、点击移动时，获取移动后的坐标，算出左边栏的大小。
新左侧栏的大小 = 原左侧栏的大小 + 移动后鼠标的坐标 - 点击时，鼠标的坐标；
这样，移动后鼠标的坐标 - 点击时鼠标的坐标的值，就是左移位负，右移位正；然后，设置左侧栏的大小。

3、鼠标松开时，解除移动事件和松开事件，并记录新的左侧边栏的大小，然后存储到本地存储中。

4、在页面开头，获取本地存储中的值，判断是否为 null，不为 null 就把左侧栏设置为和他一样的大小。

1、鼠标点击拖动条时，记录鼠标的 x 坐标，并获取左侧栏的宽度；在鼠标点击事件中，绑定2个事件（鼠标移动和鼠标松开）。

// 给 drag 绑定 鼠标点击事件
drag.addEventListener('mousedown', startDrag);

// 点击的事件
function startDrag (e) {
    // 获取点击时的坐标
    startX = e.clientX;

    // 获取左侧栏的宽度,要在点击时获取，不能在移动的时候获取，因为
    // 每移动获取一次，是一个新的宽度，在加上移动的宽度，变化会很大的。
    scalableWidth = getScalable();  // 300

    // 点击时，给 body 添加不可选中样式
    body.style.userSelect = 'none';

    // 给 body 绑定 鼠标移动 和 鼠标松开事件
    body.addEventListener('mousemove', moveDrag);
    body.addEventListener('mouseup', remove);
}

2、点击移动时，获取移动后的坐标，算出左边栏的大小。

新左侧栏的大小 = 原左侧栏的大小 + 移动后鼠标的坐标 - 点击时，鼠标的坐标；

这样，移动后鼠标的坐标 - 点击时鼠标的坐标的值，就是左移位负，右移位正；

然后，设置左侧栏的大小。

// 移动的事件
function moveDrag (e) {
    // 计算移动时，左侧栏的宽度
    let newWidth = scalableWidth + e.clientX - startX;

    scalable.style.width = newWidth + 'px';
}

3、鼠标松开时，解除移动事件和松开事件，并记录新的左侧边栏的大小，然后存储到本地存储中。

// 解绑的事件
function remove () {
    // 给 body 取消不可选中样式
    body.style.userSelect = 'auto';

    // 再次获取左侧栏的宽度，存储到本地存储中
    localStorage.setItem('scalableWidth', getScalable());

    body.removeEventListener('mousemove', moveDrag);
    body.removeEventListener('mouseup', remove)
}

4、在页面开头，获取本地存储中的值，判断是否为 null，不为 null 就把左侧栏设置为和他一样的大小。

// 获取本地存储中的左侧栏的宽度,并进行判断，如果有值，就设置为 左侧栏的宽度；
let localWidth = localStorage.getItem('scalableWidth');
if (localWidth !== null) {
    scalable.style.width = localWidth + 'px';
}

全部代码：

<body>
    <!-- 左侧栏 -->
    <div class="scalable">
        <div class="left-content">
            <img src="xxx" alt="">
        </div>
        <!-- 拖动条 -->
        <div class="drag">
            <i></i>
            <i></i>
        </div>
    </div>
    <!-- 内容栏 -->
    <div class="content">
        <div class="right-content">
            holle word
        </div>
    </div>
</body>

<style>
* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    min-height: 100vh;
}

/* 左侧栏 */
.scalable {
    position: relative;
    width: 300px;
    min-width: 100px;  /* 设置最小宽度 */
    height: 100vh;
    background-color: beige;
}

/* 拖动条 */
.drag {
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
    height: 100vh;
    /* 设置阴影 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: col-resize;

    display: flex;
    justify-content: center;
    align-items: center;
}

 /* 拖动条 中的2条线 */
.drag i {
    display: inline-block;
    width: 1px;
    height: 20px;
    background-color: #3e3e3e;
}
.drag i:nth-child(1) {
    margin-right: 5px;
}

.left-content {
    padding: 20px;
}
.left-content img {
    width: 100%;
}

.right-content {
    padding: 20px 20px 20px 40px;
}
</style>

<script>
// 获取 body，拖动条 和 左侧栏
let drag = document.querySelector('.drag');
let body = document.querySelector('body');
let scalable = document.querySelector('.scalable');

// 定义变量，记录 点击时的X
let startX, scalableWidth = 0;

// 获取本地存储中的左侧栏的宽度,并进行判断，如果有值，就设置为 左侧栏的宽度；
let localWidth = localStorage.getItem('scalableWidth');
if (localWidth !== null) {
    scalable.style.width = localWidth + 'px';
}

// 给 drag 绑定 鼠标点击事件
drag.addEventListener('mousedown', startDrag);

// 点击的事件
function startDrag (e) {
    // 获取点击时的坐标
    startX = e.clientX;

    // 获取左侧栏的宽度,要在点击时获取，不能在移动的时候获取，因为
    // 每移动获取一次，是一个新的宽度，在加上移动的宽度，变化会很大的。
    // scalableWidth = window.getComputedStyle(scalable).width;  // 300px
    scalableWidth = getScalable();  // 300

    // 点击时，给 body 添加不可选中样式
    body.style.userSelect = 'none';

    // 给 body 绑定 鼠标移动 和 鼠标松开事件
    body.addEventListener('mousemove', moveDrag);
    body.addEventListener('mouseup', remove);
}

// 移动的事件
function moveDrag (e) {
    // 计算移动时，左侧栏的宽度
    let newWidth = scalableWidth + e.clientX - startX;

    scalable.style.width = newWidth + 'px';
}

// 解绑的事件
function remove () {
    // 给 body 取消不可选中样式
    body.style.userSelect = 'auto';

    // 再次获取左侧栏的宽度，存储到本地存储中
    localStorage.setItem('scalableWidth', getScalable());

    body.removeEventListener('mousemove', moveDrag);
    body.removeEventListener('mouseup', remove)
}

// 获取左侧栏的宽度 函数
function getScalable () {
    return parseInt(window.getComputedStyle(scalable).width, 10);
}
</script>

以上。

zxf_CN

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
可移动的侧边栏

还是老样子，学习 CodingStartup起码课的实现可调侧栏（点击传送门，可以观看哔哩哔哩up 的视频），就来写文章了，虽然不是什么很好的文章，但我就是要写，哈哈哈。今天实现的效果是可移动的侧栏，鼠标点击拖动，页面重新加载时，可以记录上一次调整的大小，让侧栏保持和上一次调整的大小一致。以下是修改图：开始吧！关键代码：鼠标点击 mousedown；鼠标移动 mousemove；鼠标松开 mouseup；让页面元素，不能被鼠标选中的样式：user-select:none；
复制链接

扫一扫

专栏目录