移动端div多对象拉伸大小

Question

<!-- 窗口1 -->
    <div  class="ktdklsdiv">    <div  class="btl">窗口1</div>    
    <div  class="lsct"></div><!-- 拉伸窗体 -->
    </div>
    
    <!-- 窗口2 -->
    <div  class="ktdklsdiv">    <div  class="btl">窗口2</div>    
    <div  class="lsct"></div><!-- 拉伸窗体 -->
    </div>

    <!-- 窗口3-->
    <div  class="ktdklsdiv">    <div  class="btl">窗口3</div>    
    <div  class="lsct"></div><!-- 拉伸窗体 -->
    </div>

<script>
  const ktdklsdivClass = document.getElementsByClassName('ktdklsdiv')[0];
  const lsctClass = document.getElementsByClassName('lsct')[0];

  let isResizing = false;
  let startX, startY, startWidth, startHeight;
  let isDraggingRight = false;
  let isDraggingDown = false;

  lsctClass.addEventListener('touchstart', (e) => {
    isResizing = true;
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
    startWidth = ktdklsdivClass.offsetWidth;
    startHeight = ktdklsdivClass.offsetHeight;
  });

  document.addEventListener('touchmove', (e) => {
    if (!isResizing) return;
    const currentX = e.touches[0].clientX;
    const currentY = e.touches[0].clientY;
    const dx = currentX - lastX; // 计算 X 轴上的变化量
    const dy = currentY - lastY; // 计算 Y 轴上的变化量

    // Check if the drag is towards the right or down
    isDraggingRight = dx > 0;
    isDraggingDown = dy > 0;

    if (isDraggingRight || isDraggingDown) {
      const maxWidth = window.innerWidth - ktdklsdivClass.offsetLeft - lsctClass.offsetWidth;
      const maxHeight = window.innerHeight - ktdklsdivClass.offsetTop - lsctClass.offsetHeight;

      const newWidth = Math.min(startWidth + dx, maxWidth);
      const newHeight = Math.min(startHeight + dy, maxHeight);

      ktdklsdivClass.style.width = newWidth + 'px';
      ktdklsdivClass.style.height = newHeight + 'px';
    }
  });

  document.addEventListener('touchend', () => {
    isResizing = false;
    isDraggingRight = false;
    isDraggingDown = false;
  });

  document.addEventListener('touchmove', (e) => {
    if (!isResizing) return;
    const dx = e.touches[0].clientX - startX;
    const dy = e.touches[0].clientY - startY;

    // Check if the drag is towards the right or down
    isDraggingRight = dx > 0;
    isDraggingDown = dy > 0;

    // Check if the drag is towards the left or up
    const isDraggingLeft = dx < 0;
    const isDraggingUp = dy < 0;

    let newWidth, newHeight;
    if (isDraggingRight || isDraggingLeft) {

      const maxWidth = window.innerWidth - ktdklsdivClass.offsetLeft - lsctClass.offsetWidth;
      const minWidth = lsctClass.offsetWidth; // You can set a minimum width
      newWidth = Math.min(Math.max(startWidth + dx, minWidth), maxWidth);
    }

    if (isDraggingDown || isDraggingUp) {
      const maxHeight = window.innerHeight - ktdklsdivClass.offsetTop - lsctClass.offsetHeight;
      const minHeight = lsctClass.offsetHeight; // You can set a minimum height
      newHeight = Math.min(Math.max(startHeight + dy, minHeight), maxHeight);
    }

    // Update the size of the ktdklsdiv
    if (newWidth!== undefined) ktdklsdivClass.style.width = newWidth + 'px';
    if (newHeight!== undefined) ktdklsdivClass.style.height = newHeight + 'px';
  });
</script>

这段js是移动端控制div拉伸宽高的，但是他只能控制一个对象，如何让这段js控制这3个div的子系lsct对父系窗体进行分别的拉伸呢？

Answer 1

引自免费微信小程序：皆我百晓生

为了使这个JavaScript代码能够控制三个不同的ktdklsdiv元素各自对应的lsct元素进行独立的尺寸调整，你需要做一些修改。首先，你需要遍历所有的.ktdklsdiv元素，而不是只获取第一个。接下来，为每个lsct元素添加事件监听器，并在事件处理函数中区分当前操作的是哪个ktdklsdiv。

以下是修改后的代码：

<!-- 窗口1 -->
<div class="ktdklsdiv">
  <div class="btl">窗口1</div>
  <div class="lsct"></div><!-- 拉伸窗体 -->
</div>

<!-- 窗口2 -->
<div class="ktdklsdiv">
  <div class="btl">窗口2</div>
  <div class="lsct"></div><!-- 拉伸窗体 -->
</div>

<!-- 窗口3 -->
<div class="ktdklsdiv">
  <div class="btl">窗口3</div>
  <div class="lsct"></div><!-- 拉伸窗体 -->
</div>

<script>
  const ktdklsdivs = document.getElementsByClassName('ktdklsdiv');
  const lscts = Array.from(document.getElementsByClassName('lsct'));

  lscts.forEach((lsct, index) => {
    const ktdklsdiv = ktdklsdivs[index];

    let isResizing = false;
    let startX, startY, startWidth, startHeight;
    let isDraggingRight = false;
    let isDraggingDown = false;

    lsct.addEventListener('touchstart', (e) => {
      isResizing = true;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
      startWidth = ktdklsdiv.offsetWidth;
      startHeight = ktdklsdiv.offsetHeight;
    });

    document.addEventListener('touchmove', (e) => {
      if (!isResizing) return;
      const currentX = e.touches[0].clientX;
      const currentY = e.touches[0].clientY;
      const dx = currentX - startX; // 计算 X 轴上的变化量
      const dy = currentY - startY; // 计算 Y 轴上的变化量

      // Check if the drag is towards the right or down
      isDraggingRight = dx > 0;
      isDraggingDown = dy > 0;

      if (isDraggingRight || isDraggingDown) {
        const maxWidth = window.innerWidth - ktdklsdiv.offsetLeft - lsct.offsetWidth;
        const maxHeight = window.innerHeight - ktdklsdiv.offsetTop - lsct.offsetHeight;

        const newWidth = Math.min(startWidth + dx, maxWidth);
        const newHeight = Math.min(startHeight + dy, maxHeight);

        ktdklsdiv.style.width = newWidth + 'px';
        ktdklsdiv.style.height = newHeight + 'px';
      }
    });

    document.addEventListener('touchend', () => {
      isResizing = false;
      isDraggingRight = false;
      isDraggingDown = false;
    });

    document.addEventListener('touchmove', (e) => {
      if (!isResizing) return;
      const dx = e.touches[0].clientX - startX;
      const dy = e.touches[0].clientY - startY;

      // Check if the drag is towards the right or down
      isDraggingRight = dx > 0;
      isDraggingDown = dy > 0;

      // Check if the drag is towards the left or up
      const isDraggingLeft = dx < 0;
      const isDraggingUp = dy < 0;

      let newWidth, newHeight;
      if (isDraggingRight || isDraggingLeft) {

        const maxWidth = window.innerWidth - ktdklsdiv.offsetLeft - lsct.offsetWidth;
        const minWidth = lsct.offsetWidth; // You can set a minimum width
        newWidth = Math.min(Math.max(startWidth + dx, minWidth), maxWidth);
      }

      if (isDraggingDown || isDraggingUp) {
        const maxHeight = window.innerHeight - ktdklsdiv.offsetTop - lsct.offsetHeight;
        const minHeight = lsct.offsetHeight; // You can set a minimum height
        newHeight = Math.min(Math.max(startHeight + dy, minHeight), maxHeight);
      }

      // Update the size of the ktdklsdiv
      if (newWidth !== undefined) ktdklsdiv.style.width = newWidth + 'px';
      if (newHeight !== undefined) ktdklsdiv.style.height = newHeight + 'px';
    });
  });
</script>

这段代码会为每个.lsct元素创建单独的事件处理程序，这样它们就可以独立地调整各自的.ktdklsdiv元素的尺寸了。