原生js实现拖拽改变宽度

最新推荐文章于 2024-05-07 11:13:53 发布

SpringSir

最新推荐文章于 2024-05-07 11:13:53 发布

阅读量680

点赞数 1

CC 4.0 BY-SA版权

分类专栏：编码技巧 web项目开发 web-js事件文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_46873254/article/details/134783896

web项目开发同时被 3 个专栏收录

37 篇文章

订阅专栏

编码技巧

36 篇文章

订阅专栏

web-js事件

2 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript实现一个简单的网页布局，通过鼠标或触摸事件实现列表区域和详情区域的自适应宽度调整，保证了在不同设备上的良好显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!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>Document</title>
    <style>
      .container {
        display: flex;
        height: 300px;
      }

      .list-page {
        width: 30%;
        background-color: #ccc;
      }

      .list-detail {
        flex: 1;
        background-color: #eee;
      }

      .drag-line {
        width: 3px;
        background-color: #999;
        cursor: ew-resize;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="list-page">
        <h2>列表区域</h2>
      </div>

      <div class="drag-line" id="drag-line"></div>

      <div class="list-detail">
        <h2>详情区域</h2>
      </div>
    </div>

    <script>
      window.addEventListener('DOMContentLoaded', () => {
        const dragLine = document.getElementById('drag-line');
        const container = document.querySelector('.container');
        const listPage = document.querySelector('.list-page');

        let startX = 0;
        let dragWidth = 0;

        dragLine.addEventListener('mousedown', startDrag);
        dragLine.addEventListener('touchstart', startDrag);

        function startDrag(event) {
          event.preventDefault();
          startX = event.clientX || event.touches[0].clientX;
          dragWidth = listPage.offsetWidth;

          document.documentElement.addEventListener('mousemove', doDrag);
          document.documentElement.addEventListener('touchmove', doDrag);
          document.documentElement.addEventListener('mouseup', stopDrag);
          document.documentElement.addEventListener('touchend', stopDrag);
        }

        function doDrag(event) {
          const clientX = event.clientX || event.touches[0].clientX;
          const offsetX = clientX - startX;
          const containerWidth = container.offsetWidth;

          let newDragWidth = dragWidth + offsetX;

          // 添加最小宽度和最大宽度限制
          if (newDragWidth < 100) {
            newDragWidth = 100;
          } else if (newDragWidth > 800) {
            newDragWidth = 800;
          }

          const newListPageWidth = (newDragWidth / containerWidth) * 100;
          const newListDetailWidth = 100 - newListPageWidth;

          listPage.style.width = newListPageWidth + '%';
          listPage.style.flex = `0 0 ${newListPageWidth}%`;
          listPage.style.maxWidth = newListPageWidth + '%';

          listDetail.style.width = newListDetailWidth + '%';
          listDetail.style.flex = `0 0 ${newListDetailWidth}%`;
          listDetail.style.maxWidth = newListDetailWidth + '%';
        }

        function stopDrag() {
          document.documentElement.removeEventListener('mousemove', doDrag);
          document.documentElement.removeEventListener('touchmove', doDrag);
          document.documentElement.removeEventListener('mouseup', stopDrag);
          document.documentElement.removeEventListener('touchend', stopDrag);
        }
      });
    </script>
  </body>
</html>