<
play
play
gta
</div> </div> </div> <script> window.addEventListener("load", () => { const grid = document.querySelector(".grid"); const originals = Array.from(grid.children); const body = document.body; const gridRect = grid.getBoundingClientRect(); const clones = []; // 1. Clone all windows and append them to <body> originals.forEach(win => { const clone = win.cloneNode(true); clone.classList.add("floating-window"); clone.style.position = "absolute"; clone.style.opacity = "0"; clone.style.pointerEvents = "auto"; body.appendChild(clone); clones.push(clone); }); // 2. Compute layout requestAnimationFrame(() => { clones.forEach((clone, i) => { const orig = originals[i]; const rect = orig.getBoundingClientRect(); clone.style.left = rect.left - gridRect.left + "px"; clone.style.top = rect.top - gridRect.top + "px"; clone.style.opacity = "1"; }); // 3. Remove grid grid.remove(); // 4. Make draggable clones.forEach(makeDraggable); }); }); function makeDraggable(el) { const titleBar = el.querySelector(".title-bar"); let isDragging = false; let offsetX = 0; let offsetY = 0; titleBar.addEventListener("mousedown", e => { e.preventDefault(); const rect = el.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; isDragging = true; el.style.zIndex = Date.now(); document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp); }); function onMove(e) { if (!isDragging) return; let x = e.clientX - offsetX; let y = e.clientY - offsetY; el.style.left = x + "px"; el.style.top = y + "px"; } function onUp() { isDragging = false; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); } } </script> </body> </html>
