原生js实现拖拽改变宽度

本文介绍了如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值