JS 实现 ResizeBar，可拖动改变上下两个区域大小

最新推荐文章于 2024-04-08 15:53:07 发布

IT博客技术分享

最新推荐文章于 2024-04-08 15:53:07 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： jQuery 拖动调整大小元素布局动态效果

本文链接：https://blog.csdn.net/qq_41646249/article/details/120994215

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

先上效果图：

代码如下：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>ResizeBar 上下移动</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>

    <style type='text/css'>
        body,
        html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #main {
            background-color: BurlyWood;
            position: absolute;
            height: 200px;
            right: 0;
            left: 0;
            top: 200px;
            margin-top: 10px;
        }

        #sidebar {
            background-color: IndianRed;
            margin-top: 10px;
            width: 100%;
            position: absolute;
            height: 200px;
            overflow-y: hidden;
        }

        #dragbar {
            position: absolute;
            bottom: 0;
            z-index: 100;
            background-color: black;
            height: 3px;
            width: 100%;
            cursor: row-resize;
        }

        #ghostbar {
            width: 100%;
            height: 3px;
            background-color: #000;
            opacity: 0.5;
            position: absolute;
            cursor: row-resize;
            z-index: 999
        }
    </style>

    <script type='text/javascript'>

        $(window).load(function () {
            var i = 0;
            var dragging = false;
            var $main = $('#main')

            $('#dragbar').mousedown(function (e) {
                console.log(e.pageY, '移动')
                e.preventDefault();
                dragging = true;
                var ghostbar = $('<div>', {
                    id: 'ghostbar',
                    css: {
                        height: '3px',
                        width: '100%',
                        top: $main.offset().bottom,
                        left: 0,
                    }
                }).appendTo('body');

                $('#mousestatus').html("mousedown" + i++);
                $(document).mousemove(function (e) {
                    console.log(e.pageY, '移动')
                    ghostbar.css("top", e.pageY + 2);

                });

            });

            $(document).mouseup(function (e) {
                $('#clickevent').html('in another mouseUp event' + i++);
                if (dragging) {
                    if(e.pageY < 200){
                        $('#sidebar').css("height", e.pageY + 2);
                        $main.css("top", e.pageY + 2);
                        $main.css("height", 200 + e.pageY - 2);
                    } 
                    if(e.pageY >= 200){
                        $('#sidebar').css("height", e.pageY + 2);
                        $main.css("top", e.pageY + 2);
                        $main.css("height", 410 - e.pageY - 2);
                    } 
                    if(e.pageY >= 400){
                        $('#sidebar').css("height", 400-2);
                        $main.css("top", 400);
                        $main.css("height", 0);
                        dragging = false;
                    }
           
                    $('#ghostbar').remove();
                    $(document).unbind('mousemove');

                    dragging = false;
                }
            });

        });

    </script>

</head>

<body>
    <div id="sidebar">
        上
        <div id="dragbar"></div>
    </div>

    <div id="main">
        下
    </div>

</body>

</html>