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

2023-12-20 23:54:47

????????当你想实现点击并拖动某个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>

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

文章来源:https://blog.csdn.net/qq_44327851/article/details/135006421
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。