jq实现拖拽边框改变div的宽度

最新推荐文章于 2024-02-22 16:06:16 发布

湖边看客

最新推荐文章于 2024-02-22 16:06:16 发布

阅读量969

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/VVVVV16/article/details/131085832

版权

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .container {
            display: flex;
            height: 100%;
        }

        .left-pane,
        .right-pane {
            flex-grow: 1;
            text-align: center;
            line-height: 100vh;
            font-size: 40px;
            overflow: hidden;
        }

        .left-pane {
            background-color: pink;

        }

        .drag-line {
            width: 5px;
            cursor: ew-resize;
            background-color: gray;
        }

        .drag-line:hover {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left-pane">
            左
        </div>
        <div class="drag-line"></div>
        <div class="right-pane">
            右
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // 获取相关元素
            var container = $('.container');
            var dragLine = $('.drag-line');
            var leftPane = $('.left-pane');
            var rightPane = $('.right-pane');

            // 拖拽线的初始位置和容器的初始宽度
            var dragStartX;
            var containerWidth;
            var leftPaneWidth;
            var rightPaneWidth;

            // 鼠标按下事件
            dragLine.mousedown(function (event) {
                event.preventDefault(); // 防止选中文本

                dragStartX = event.clientX;  //线的位置 

                containerWidth = container.width(); //容器的宽
                leftPaneWidth = leftPane.width();  //左侧容器的宽
                rightPaneWidth = rightPane.width(); //右侧容器的宽度

                // 鼠标移动和松开事件监听
                $(document).mousemove(onMouseMove);



                $(document).mouseup(onMouseUp);
            });

            // 鼠标移动事件
            function onMouseMove(event) {
                var offsetX = event.clientX - dragStartX;    //当前线条的最新的clientX-刚开始的clientX  (如果为负左边的width自然减小  为正左边的width自然增大)
                var newLeftPaneWidth = leftPaneWidth + offsetX;
                var newRightPaneWidth = rightPaneWidth - offsetX;


                console.info(offsetX, newLeftPaneWidth, newRightPaneWidth)
                // 更新左侧容器和右侧容器的宽度
                leftPane.width(newLeftPaneWidth);
                rightPane.width(newRightPaneWidth);



                // 确保容器宽度不超过容器的宽度
                if (newLeftPaneWidth < 0) {
                    leftPane.width(0);
                    rightPane.width(containerWidth);
                } else if (newRightPaneWidth < 0) {
                    leftPane.width(containerWidth);
                    rightPane.width(0);
                }
            }

            // 鼠标松开事件
            function onMouseUp() {
                // 移除鼠标移动和松开事件监听
                $(document).off('mousemove', onMouseMove);
                $(document).off('mouseup', onMouseUp);
            }
        });
    </script>
</body>

</html>