原生JS实现拖拽边界改变宽度

最新推荐文章于 2024-06-03 09:15:36 发布

叫我阿东就行

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量107

点赞数 2

分类专栏： JS有意思的小项目文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_74217055/article/details/137428757

版权

JS有意思的小项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            height: 100vh;
        }

        #div1 {
            flex: 0 0 205px;
            min-width: 205px;
            max-width: 355px;
        }

        #div1,
        #div3 {
            background: lightgrey;
            /* 背景颜色 */
            border: solid 1px #000;
            /* 边框 */
            box-sizing: border-box;
            /* 盒子模型 */
        }

        #div3 {
            flex: 1;
        }

        #div2 {
            box-sizing: border-box;
            width: 5px;
            /* 分隔条的宽度 */
            flex: 0 0 5px;
            /* 设置弹性盒子的基础宽度，不伸缩 */
            background: red;
            /* 分隔条的背景颜色 */
            cursor: ew-resize;
            /* 鼠标悬停时的光标样式 */
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="div1">div1</div>
        <div id="div2"></div>
        <div id="div3">div3</div>
    </div>
</body>
<script src="./test.js"></script>

</html>

const container = document.getElementById("container");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");
let startX,
    startWidth1,
    startWidth3; /* 初始化变量用于存储拖拽开始时的状态 */

div2.addEventListener('mousedown', function (e) {
    console.log(e);
    startX = e.clientX;
    startWidth1 = div1.offsetWidth
    startWidth3 = div3.offsetWidth
    //应用整个ew-resize光标样式到整个文档
    document.body.style.cursor = 'ew-resize'
    container.style.userSelect = 'none'
    document.addEventListener(
        "mousemove",
        resize,
        false
    ); /* 监听鼠标移动事件 */
    document.addEventListener(
        "mouseup",
        stopResize,
        false
    ); /* 监听鼠标抬起事件 */
})
function resize(e) {
    const diffX = e.clientX - startX;
    let newWidth1 = startWidth1 + diffX;
    let newWidth3 = startWidth3 - diffX;

    // 检查div1是否超出最小或最大宽度，并相应调整
    if (newWidth1 < 205) {
        newWidth1 = 205;
    } else if (newWidth1 > 355) {
        newWidth1 = 355;
    }

    // 因为div2是div1和div3之间的分隔条，所以我们需要更新div3的宽度
    // 以保持总体宽度不变。我们这里假设容器的总宽度是不变的。
    newWidth3 = container.offsetWidth - newWidth1 - div2.offsetWidth;

    // 设置新宽度
    div1.style.flex = `0 0 ${newWidth1}px`;
    div3.style.width = `${newWidth3}px`;
}

function stopResize() {
    // 移除 ew-resize 光标样式，恢复到默认状态
    document.body.style.cursor = ""; /* 移除文档的光标样式设置 */
    container.style.userSelect = ""; /* 恢复文本选择功能 */

    /* 移除鼠标事件监听器 */
    document.removeEventListener("mousemove", resize, false);
    document.removeEventListener("mouseup", stopResize, false);
}