如何在可拖拽CSS Div盒子中嵌入iframe并正常渲染？

你现有一段实现触摸拖拽盒子的代码，尝试将指定iframe嵌入<div id="box">内时无法正常渲染，以下是实现该功能必须注意的核心要点：

• 修正DOM结构错误
  原代码存在标签未闭合（<div id="box">未加闭合标签）、样式/脚本放置位置不合理的问题。需将<style>移出<div id="box">（建议放在<head>中），确保<div id="box">正确闭合，并将iframe放在盒子内部的正确位置。结构混乱会直接导致iframe无法正常渲染。

• 调整拖拽坐标计算逻辑
  原代码中touchmove事件直接将pageX/pageY赋值给盒子的left/top，会导致盒子左上角瞬间跳至触摸点，且未处理触摸起始位置的偏移量。需在touchstart事件中记录盒子的初始位置和触摸点的初始坐标，在touchmove时计算偏移量来更新盒子位置，核心逻辑示例：

  let initialX, initialY, boxX, boxY;
  box.addEventListener('touchstart', function(e) {
    e.preventDefault();
    initialX = e.targetTouches[0].pageX;
    initialY = e.targetTouches[0].pageY;
    boxX = parseInt(window.getComputedStyle(box).left);
    boxY = parseInt(window.getComputedStyle(box).top);
  });
  

  在touchmove中通过box.style.left = (boxX + e.targetTouches[0].pageX - initialX) + 'px'更新位置，避免拖拽跳动。

• 解决iframe的触摸事件拦截问题
  iframe内部页面会捕获触摸事件，导致外层盒子无法接收touchmove/touchend事件，拖拽功能失效。需给iframe添加触摸事件监听，阻止默认行为或停止事件冒泡：

  const iframe = document.querySelector('#box iframe');
  iframe.addEventListener('touchstart', function(e) {
    e.preventDefault(); // 阻止iframe捕获触摸事件
  });
  

  也可在拖拽开始时临时设置iframe的pointer-events: none，拖拽结束后恢复。

• 匹配盒子与iframe的尺寸
  原盒子宽高为100px，远小于iframe的500x250尺寸，会导致iframe被截断。需修改#box的CSS宽高为500px和250px，或设置overflow: auto以支持滚动查看溢出内容。

• 修正容器的定位上下文
  原代码中#box使用position: absolute，但未给父容器#container设置定位上下文，导致盒子相对于整个文档定位。需给#container添加position: relative，确保盒子的left/top坐标相对于容器计算。

修正后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    #box {
      position: absolute;
      width: 500px;
      height: 250px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="box">
      <iframe src="https://alceawisteria.codeberg.page/Diarykeepers_Homepage/stash/webamp.html" frameBorder="no" width="500" height="250"></iframe>
    </div>
  </div>

  <script>
    window.onload = function() {
      const box = document.getElementById('box');
      const iframe = box.querySelector('iframe');
      let initialX, initialY, boxX, boxY;

      // 阻止iframe捕获触摸事件
      iframe.addEventListener('touchstart', function(e) {
        e.preventDefault();
      });

      box.addEventListener('touchstart', function(e) {
        e.preventDefault();
        // 记录初始位置
        initialX = e.targetTouches[0].pageX;
        initialY = e.targetTouches[0].pageY;
        boxX = parseInt(window.getComputedStyle(box).left) || 0;
        boxY = parseInt(window.getComputedStyle(box).top) || 0;
      });

      box.addEventListener('touchmove', function(e) {
        e.preventDefault();
        const touchX = e.targetTouches[0].pageX;
        const touchY = e.targetTouches[0].pageY;
        // 计算偏移并更新位置
        box.style.left = (boxX + touchX - initialX) + 'px';
        box.style.top = (boxY + touchY - initialY) + 'px';
      });

      box.addEventListener('touchend', function(e) {
        // 可在此记录最终位置
        const x = parseInt(box.style.left);
        const y = parseInt(box.style.top);
      });
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者repeekyraid cero