Post-IT arrastrable con JavaScript moderno

Muestra un Post-IT fijo en la pantalla que se puede arrastrar por la cabecera y cerrar. Usa Pointer Events (API moderna que unifica mouse, touch y stylus) y localStorage para recordar si el usuario lo cerró. El original de 2002 usaba document.all y document.layers de IE4/Netscape 4, incompatibles con cualquier navegador actual. Sin dependencias externas.
				<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Post-IT arrastrable</title>

    <style>

        /*  Página de demostración  */

        body {

            font-family: sans-serif;

            background: #f0f4f8;

            color: #333;

            padding: 2rem;

            min-height: 100vh;

        }



        /*  Post-IT  */

        #postit {

            position: fixed;         /* visible aunque se haga scroll */

            top: 80px;

            left: 60px;

            width: 260px;

            min-height: 120px;

            background: #fff9a0;

            border: 1px solid #e0d060;

            border-radius: 2px 2px 2px 18px;  /* esquina inferior izq. doblada */

            box-shadow: 4px 4px 10px rgba(0,0,0,.2), -1px 1px 0 #e0d060;

            padding: 0;

            z-index: 9999;

            user-select: none;

            /* Oculto hasta que JS lo muestre */

            display: none;

        }



        /* Cabecera arrastrable */

        #postit-header {

            background: #f0d000;

            padding: .35rem .6rem;

            cursor: grab;

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-bottom: 1px solid #c8b000;

            font-size: .75rem;

            font-weight: bold;

            color: #555;

            border-radius: 2px 2px 0 0;

        }

        #postit-header:active { cursor: grabbing; }



        /* Botón de cierre */

        #postit-close {

            background: none;

            border: none;

            cursor: pointer;

            font-size: 1rem;

            line-height: 1;

            color: #888;

            padding: 0 2px;

        }

        #postit-close:hover { color: #c00; }



        /* Contenido */

        #postit-body {

            padding: .6rem .8rem;

            font-size: .9rem;

            line-height: 1.5;

        }

    </style>

</head>

<body>



<h1>Post-IT arrastrable</h1>

<p>La nota aparece automáticamente. Arrástrala por la cabecera amarilla y ciérrala con la ×.</p>

<p>Si la cierras, no vuelve a aparecer hasta que borres las cookies o hagas clic en

   <button onclick="mostrarPostit()">Mostrar Post-IT</button>.</p>



<!--  Post-IT  -->

<div id="postit">

    <div id="postit-header">

        <span>Aviso</span>

        <button id="postit-close" title="Cerrar">×</button>

    </div>

    <div id="postit-body">

        <!-- Edita aquí el contenido del Post-IT -->

        <strong>¡Bienvenido!</strong><br>

        Esto es un Post-IT arrastrable.<br>

        Puedes poner cualquier contenido HTML aquí dentro.

    </div>

</div>



<script>

/**

 * Post-IT arrastrable  JavaScript moderno

 *

 * Autor:    David Carrero  https://carrero.es

 * Original: programacion.net (2002), IE4 + Netscape 4

 *

 * Reescrito con eventos modernos (pointermove/pointerdown),

 * position:fixed y localStorage para recordar si fue cerrado.

 * Sin document.all, sin document.layers, sin IE-only APIs.

 */



const postit  = document.getElementById('postit');

const header  = document.getElementById('postit-header');

const btnClose = document.getElementById('postit-close');



const STORAGE_KEY = 'postit_cerrado';



//  Mostrar / ocultar 

function mostrarPostit() {

    localStorage.removeItem(STORAGE_KEY);

    postit.style.display = 'block';

}



function cerrarPostit() {

    postit.style.display = 'none';

    localStorage.setItem(STORAGE_KEY, '1');

}



// Al cargar, mostrar solo si el usuario no lo cerró antes

if (!localStorage.getItem(STORAGE_KEY)) {

    postit.style.display = 'block';

}



btnClose.addEventListener('click', cerrarPostit);



//  Arrastre con Pointer Events 

// PointerEvents unifican mouse, touch y stylus en una sola API.

let dragging = false;

let offsetX  = 0;

let offsetY  = 0;



header.addEventListener('pointerdown', e => {

    dragging = true;

    header.setPointerCapture(e.pointerId);  // captura el puntero aunque salga del header

    const rect = postit.getBoundingClientRect();

    offsetX = e.clientX - rect.left;

    offsetY = e.clientY - rect.top;

    e.preventDefault();

});



header.addEventListener('pointermove', e => {

    if (!dragging) return;

    let x = e.clientX - offsetX;

    let y = e.clientY - offsetY;



    // Mantener dentro de la ventana

    x = Math.max(0, Math.min(x, window.innerWidth  - postit.offsetWidth));

    y = Math.max(0, Math.min(y, window.innerHeight - postit.offsetHeight));



    postit.style.left = x + 'px';

    postit.style.top  = y + 'px';

});



header.addEventListener('pointerup',    () => { dragging = false; });

header.addEventListener('pointercancel', () => { dragging = false; });

</script>



</body>

</html>