鼠标拖动改变盒子的大小

最新推荐文章于 2024-01-17 15:58:33 发布

小样还想跑

最新推荐文章于 2024-01-17 15:58:33 发布

阅读量860

点赞数

分类专栏： html vue js 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_45356397/article/details/128238381

版权

js 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

html

23 篇文章 0 订阅

订阅专栏

vue

23 篇文章 0 订阅

订阅专栏


<!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>鼠标拖动改变盒子的大小</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: #426ab3;
      }
      .box {
        width: 100%;
        height: 400px;
        background: #9b95c9;
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .box-line {
        width: 100%;
        height: 2px;
        background-color: red;
        cursor: n-resize;
      }
    </style>
  </head>
  <body>
    <div class="box" id="box">
      <div class="box-line" id="box-line"></div>
    </div>

    <script>
      let boxLine = document.getElementById('box-line');
      let box = document.getElementById('box');
      let minHeight = 400;
      let maxHeight = 800;
      let height = minHeight;

      boxLine.onmousedown = function (event) {
        const hanldeMouseUp = () => {
          document.removeEventListener('mouseup', hanldeMouseUp);
          document.removeEventListener('mousemove', hanldeMouseMove);
        };

        const hanldeMouseMove = (event) => {
          const documentH = document.documentElement.clientHeight;
          const nowH = documentH - event.clientY;
          if (nowH >= maxHeight) {
            height = maxHeight;
          } else if (nowH <= minHeight) {
            height = minHeight;
          } else {
            height = nowH;
          }

          box.style.height = height + 'px';
        };

        document.addEventListener('mouseup', hanldeMouseUp);
        document.addEventListener('mousemove', hanldeMouseMove);
      };
    </script>
  </body>
</html>