javascript 拖拽调整div大小

最新推荐文章于 2024-01-12 16:48:52 发布

原创最新推荐文章于 2024-01-12 16:48:52 发布 · 976 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用JavaScript实现div元素的拖拽调整大小功能，包括鼠标事件的监听、坐标计算和元素尺寸更新等核心步骤。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div {
            height: 200px;
            position: absolute;
            top: 0px;
        }
        .right {
            right: 0px;
        }
        .left {
            left: 0px;
        }
        .right,.left {
            width: 49.75%;
        }
        .drag {
            width: 0.5%;
            left: 49.75%
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<div class="left" style="background-color: grey"></div>
<div class="drag"></div>
<div class="right" style="background-color: cadetblue"></div>
<script type="text/javascript">
    //调整大小
    var resizeDiv = {
        init: function () {
            resizeFlag = false;
            this.mouseDown();
            this.mouseMove();
            this.mouseUp();
            this.mouseLeave();
        },
        mouseDown: function () {
            $(".drag").on("mousedown", function () {
            	//按下设为true，允许根据鼠标位置调整大小
                resizeFlag = true;
            });
        },
        mouseMove: function () {
            $(document).on("mousemove", function (e) {
        		//resizeFlag为true时才允许根据鼠标位置调整大小
                if (resizeFlag) {
                    var mousePointX = e.pageX;
                    if (mousePointX < $(window).width()) {
                        $(".left").css("width", mousePointX);
                        $(".right").css("width", $(window).width() - $(".left").width() - $(".drag").width());
                    }
                }
            });
        },
        mouseLeave: function () {
            $(document).on("mouseleave", function (e) {
            	//鼠标离开，标识设为false，不再根据鼠标位置调整大小
                resizeFlag = false;
            });
        },
        mouseUp: function () {
            $(document).on("mouseup", function () {
            	//鼠标抬起，标识设为false，不再根据鼠标位置调整大小
                resizeFlag = false;
            });
        }
    };
    resizeDiv.init();
</script>
</body>
</html>