js实现简单的侧边栏拖动功能

最新推荐文章于 2024-06-30 14:04:39 发布

Future_object

最新推荐文章于 2024-06-30 14:04:39 发布

阅读量1.6k

点赞数

分类专栏： js html5 文章标签： js拖拽

本文链接：https://blog.csdn.net/qq_39634880/article/details/89249119

版权

js 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

1.效果图(中间支持拖动)

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .boxParent{
        display:flex;
        width:1200px;
        height:800px;
        border: 1px solid yellow;
        margin: 0 auto;
    }
    .divider{
        flex-basis: 8px;
        border-right: 1px solid #ccc;
        background:#ccc;
        cursor: ew-resize
    }
    .left{
        padding: 16px;
        flex-basis: 300px;
        overflow: auto;
        background: #fff;
        max-height: 100%
    }
</style>
<body>
<div class="boxParent">
    <div id="gridMove" class="left">
        左侧目录文件
    </div>
    <div
        class="divider"
        id="divider"
        >
    </div>
    <div class="right">
        <div>
            右侧文件内容
        </div>
    </div>
</div>
<script>
    var moveWidth = 300;
    var startPageX=0;
    var startAsideWidth=0;
    var divider=document.getElementById("divider");
    var gridMove=document.getElementById("gridMove");
    divider.ondragstart=function(e){
        startPageX = e.pageX;
        startAsideWidth = moveWidth;
    };
    divider.ondrag=function(e){
        if (e.pageX) {
            const offset = e.pageX - startPageX;
            let width = startAsideWidth + offset;
            if (width !== moveWidth) {
                moveWidth = width;
                if (width < 100) {
                    width = 100;
                }
                gridMove.style.flexBasis= width + 'px';
            }
        }
    }
</script>
</body>
</html>

Future_object

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现简单的侧边栏拖动功能

1.效果图(中间支持拖动)2.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .boxParent{...
复制链接

扫一扫

专栏目录