floating windows

by Andy Bulka

HTML

<div id="window1" class="floating-window">
  <div class="window-header">
    <span>Window 1</span>
    <button class="close-btn">X</button>
  </div>
  <div class="window-content">
    <textarea></textarea>
  </div>
</div>

<div id="window2" class="floating-window">
  <div class="window-header">
    <span>Window 2</span>
    <button class="close-btn">X</button>
  </div>
  <div class="window-content">
    <textarea></textarea>
  </div>
</div>

<style>
  .floating-window {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 200px;
    background: white;
    border: 1px solid black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    resize: both;
    overflow: hidden;
  }
  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: #ddd;
    cursor: move;
  }
  .window-content {
    height: calc(100% - 30px); /* Adjust for header height */
    padding: 0;
    margin: 0;
  }
  .window-content textarea {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    resize: none;
    outline: none;
  }
</style>

<script>
  const setupFloatingWindow = (windowId) => {
    const windowEl = document.getElementById(windowId);
    const header = windowEl.querySelector('.window-header');
    const closeBtn = windowEl.querySelector('.close-btn');

    closeBtn.addEventListener('click', () => {
      windowEl.style.display = 'none';
    });

    let isDragging = false;
    let offsetX, offsetY;

    header.addEventListener('mousedown', (e) => {
      isDragging = true;
      offsetX = e.clientX - windowEl.offsetLeft;
      offsetY = e.clientY - windowEl.offsetTop;
    });

    document.addEventListener('mousemove', (e) => {
      if (isDragging) {
        windowEl.style.left = `${e.clientX - offsetX}px`;
        windowEl.style.top = `${e.clientY - offsetY}px`;
      }
    });

    document.addEventListener('mouseup', () => {
      isDragging =...