调整网格大小

Question

所以我有这个网格，我想让它水平调整大小

<div id="grid">
        <div class="editor-container" id="editor-container">
            <!-- Ensure each textarea has a unique ID -->
            <textarea class="editor" id="htmlEditor"><!--Your initial HTML content here-->
            <b>Hello World!</b></textarea>
            <textarea class="editor" id="jsEditor" style="display: none;"><!--Your initial JS content here--></textarea>
            <textarea class="editor" id="cssEditor" style="display: none;">  body, html {
                height: 100%;
                margin: 0;
                font-family:'Helvetica Neue', sans-serif;
            }
            </textarea>
        </div>
        <div id="divider"> </div>
        <div class="output-container">
            <iframe id="output"></iframe>
        </div>
    </div>

如何调整其大小，以便我可以拖动分隔线并调整其大小并具有响应能力？

我尝试使用鼠标按下事件，但它仅在向左拖动时才有效，当我向右拖动时，它会断开连接，除非我拖动得很慢

Answer 1

要创建具有可拖动分隔线的可调整大小的网格，您可以使用 JavaScript 和 CSS。这是一个帮助您入门的简化示例：

<div id="grid">
  <div class="editor-container" id="editor-container">
    <!-- Your textareas go here -->
  </div>
  <div id="divider"></div>
  <div class="output-container">
    <iframe id="output"></iframe>
  </div>
</div>

<style>
  #grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Three columns with a resizable middle column */
    height: 100vh; /* Adjust the height as needed */
  }

  #divider {
    cursor: ew-resize; /* Set cursor to show resize direction */
    background-color: #ddd;
    width: 10px;
    height: 100%;
  }

  #editor-container,
  .output-container {
    overflow: hidden; /* Ensure child elements do not overflow */
  }
</style>

<script>
  const divider = document.getElementById('divider');
  const editorContainer = document.getElementById('editor-container');

  let isResizing = false;

  divider.addEventListener('mousedown', (event) => {
    isResizing = true;
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', () => {
      isResizing = false;
      document.removeEventListener('mousemove', handleMouseMove);
    });
  });

  function handleMouseMove(event) {
    if (isResizing) {
      const newWidth = event.clientX;
      editorContainer.style.width = `${newWidth}px`;
    }
  }
</script>

此示例设置了一个包含三列的网格布局，并在中间列中使用了可调整大小的分隔线。 JavaScript 代码向分隔线添加了 mousedown 事件监听器，当用户拖动时，它会动态调整左列的宽度。您可以根据您的特定需求调整此示例，并根据需要添加更多样式。