原生JavaScript实现左右边拖拽改变宽度

开发工程中多余的功能弃之可惜，留着记录一下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Div</title>
</head>

<body>
    <style>
        .resizable {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            position: relative;
        }

        .resize-handle {
            position: absolute;
            width: 10px;
            height: 100%;
            top: 0;
            background-color: #3498db;
            cursor: col-resize;
        }

        #left-resize-handle {
            left: 0;
        }

        #right-resize-handle {
            right: 0;
        }
    </style>
    <div class="resizable" id="resizable">
        Content
        <div class="resize-handle" id="left-resize-handle"></div>
        <div class="resize-handle" id="right-resize-handle"></div>
    </div>
    <script>
        const resizable = document.getElementById("resizable");
        const leftResizeHandle = document.getElementById("left-resize-handle");
        const rightResizeHandle = document.getElementById("right-resize-handle");
        let isResizing = false;
        let initialX = 0;
        let originalWidth = 0;

        function resizeElement(deltaX) {
            const newWidth = originalWidth + deltaX;
            resizable.style.width = newWidth + "px";
        }

        function throttle(callback, delay) {
            let last = 0;
            return function () {
                const now = Date.now();
                if (now - last >= delay) {
                    callback.apply(this, arguments);
                    last = now;
                }
            };
        }

        leftResizeHandle.addEventListener("mousedown", (e) => {
            isResizing = true;
            initialX = e.clientX;
            originalWidth = parseInt(getComputedStyle(resizable).width);
        });

        rightResizeHandle.addEventListener("mousedown", (e) => {
            isResizing = true;
            initialX = e.clientX;
            originalWidth = parseInt(getComputedStyle(resizable).width);
        });

        const throttledResizeElement = throttle((deltaX) => {
            if (isResizing) {
                resizeElement(deltaX);
            }
        }, 16); // 60 FPS

        document.addEventListener("mousemove", (e) => {
            const deltaX = e.clientX - initialX;
            throttledResizeElement(deltaX);
        });

        document.addEventListener("mouseup", () => {
            isResizing = false;
        });

    </script>
</body>

</html>
发送评论编辑评论
发送评论 编辑评论

发送评论编辑评论
