JS 实现带手柄自由调整页面大小的功能

crary,记忆

于 2023-12-20 18:30:00 发布

阅读量402

点赞数 9

分类专栏：前端知识总结拖拽调整页面大小文章标签： javascript 开发语言前端 html css

本文链接：https://blog.csdn.net/qq_44327851/article/details/135006421

版权

前端知识总结同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

拖拽调整页面大小

1 篇文章 0 订阅

订阅专栏

当你想实现点击并拖动某个dic元素来调整其大小的时候，我们可以通过如下代码(可直接复制粘贴运行)实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resizable Element</title>
  <style>
    .resizable {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      border: 1px solid #ccc;
      resize: both;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="resizable">
    <!-- 这里放置需要调整大小的内容 -->
  </div>

  <script>
    document.addEventListener('mousedown', function(event) {
      if (event.target.classList.contains('resizable')) {
        event.preventDefault();
        event.target.classList.add('resizing');
        const initialX = event.clientX;
        const initialY = event.clientY;

        const mouseMoveListener = function(e) {
          const width = event.target.offsetWidth + (e.clientX - initialX);
          const height = event.target.offsetHeight + (e.clientY - initialY);
          event.target.style.width = width + 'px';
          event.target.style.height = height + 'px';
        };

        const mouseUpListener = function() {
          event.target.classList.remove('resizing');
          event.target.style.userSelect = 'auto';
          event.target.style.cursor = 'auto';
          document.body.style.cursor = 'auto';
          document.removeEventListener('mousemove', mouseMoveListener);
          document.removeEventListener('mouseup', mouseUpListener);
        };

        event.target.style.userSelect = 'none';
        event.target.style.cursor = 'nwse-resize';
        document.body.style.cursor = 'nwse-resize';
        document.addEventListener('mousemove', mouseMoveListener);
        document.addEventListener('mouseup', mouseUpListener);
      }
    });
  </script>
</body>
</html>

注意！！！：

但在实际开发运用中，上面的代码是远远不够的，运行过上面代码的伙伴肯定能感觉到效果是不理想的，只能实现基本的调整页面大小的需求，而在调整页面大小的过程中是不灵活的，所以我们可以通过以下方式得到改善——添加手柄：在下面的优化代码中，我们使用JavaScript 实现了调整大小的功能。当用户点击并拖动位于 .resize-handle 类名的元素时，会触发相应的事件处理函数，从而实现调整大小的效果。这样就能够更灵活地控制调整大小的行为和效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resizable Element</title>
  <style>
    .resizable {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      border: 1px solid #ccc;
      overflow: auto;
      position: relative;
    }
    .resize-handle {
      width: 10px;
      height: 10px;
      background-color: #000;
      position: absolute;
      bottom: 0;
      right: 0;
      cursor: nwse-resize;
    }
  </style>
</head>
<body>
  <div class="resizable">
    <!-- 这里放置需要调整大小的内容 -->
    <div class="resize-handle"></div>
  </div>

  <script>
    const resizableElement = document.querySelector('.resizable');
    const resizeHandle = resizableElement.querySelector('.resize-handle');

    let isResizing = false;
    let initialX;
    let initialY;
    let originalWidth;
    let originalHeight;

    resizeHandle.addEventListener('mousedown', function(event) {
      event.preventDefault();
      isResizing = true;
      initialX = event.clientX;
      initialY = event.clientY;
      originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));
      originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));

      document.addEventListener('mousemove', resize);
      document.addEventListener('mouseup', stopResize);
    });

    function resize(event) {
      if (isResizing) {
        const width = originalWidth + (event.clientX - initialX);
        const height = originalHeight + (event.clientY - initialY);
        resizableElement.style.width = width + 'px';
        resizableElement.style.height = height + 'px';
      }
    }

    function stopResize() {
      isResizing = false;
      document.removeEventListener('mousemove', resize);
      document.removeEventListener('mouseup', stopResize);
    }
  </script>
</body>
</html>

最后一句：代码都是可直接运行的，所以大家可以先复制代码到自己电脑的编辑器上面运行看效果，是否能达到自己的预期需求哦！

crary,记忆

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS 实现带手柄自由调整页面大小的功能

但在实际开发运用中，上面的代码是远远不够的，运行过上面代码的伙伴肯定能感觉到效果是不理想的，只能实现基本的调整页面大小的需求，而在调整页面大小的过程中是不灵活的，所以我们可以通过以下方式得到改善——最后一句：代码都是可直接运行的，所以大家可以先复制代码到自己电脑的编辑器上面运行看效果，是否能达到自己的预期需求哦！类名的元素时，会触发相应的事件处理函数，从而实现调整大小的效果。这样就能够更灵活地控制调整大小的行为和效果。：在下面的优化代码中，我们使用JavaScript 实现了调整大小的功能。
复制链接

扫一扫