what an img drag layout

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="ssn.jpg">
    <title>what an img drag layout</title>
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start; /* Aligns containers to the left */
            gap: 10px;
            margin: 0;
            padding: 10px;
            background-color: white;
            color: black; /* text color */
        }
        .container {
            border: 1px solid #000;
            overflow-y: scroll;
            padding: 10px;
        }
        .draggable {
            width: 200px;
            height: 200px;
            border: 2px dashed #000;
            cursor: move;
            padding: 10px;
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #f0f0f0; /* color of draggable container */
        }

       .cover img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          overflow: hidden;
        }

        .blink {
                animation: blinker 1.5s linear infinite;
                color: #F0CF97 ;
                font-family: ms gothic;
                font-size: 25px;
            }

            @keyframes blinker {
                50% {
                    opacity: 0;
                }
            }
        p {
          text-align: center;
          line-height: 30px;
          }
    </style>
</head>
<body>
    <div class="container" style="width: 300px; height: 500px;">
        <p>text here</p>
        <p><img src="cute.jpg" style="width: 50%; height: 50%;"><br>
        Platero es pequeño, peludo, suave; tan blando por fuera, que se diría todo de algodón, que no lleva huesos. Sólo los espejos de azabache de sus ojos son duros cual dos escarabajos de cristal negro.

        Lo dejo suelto, y se va al prado, y acaricia tibiamente con su hocico, rozándolas apenas, las florecillas rosas, celestes y gualdas…

        </p>
        <p><marquee class="blink">nervsys' themes ^^;;</marquee></p>

    </div>
    <div class="container" style="width: 300px; height: 800px;">
        <p>¡ANGELUS!</p>
        <p>

Mira, Platero, qué de rosas caen por todas partes: rosas azules, rosas, blancas, sin color… Diríase que el cielo se deshace en rosas. Mira cómo se me llenan de rosas la frente, los hombros, las, manos… ¿Qué haré yo con tantas rosas?

¿Sabes tú, quizás, de dónde es esta blanda flora, que yo no sé de dónde es, que enternece, cada día, el paisaje y lo deja dulcemente rosado, blanco y celeste—, mas rosas, más rosas—, como un cuadro de Fra Angélico, el que pintaba el cielo de rodillas?

De las siete galerías del Paraíso se creyera que tiran rosas a la tierra. Cual en una nevada tibia y vagamente colorida, se quedan las rosas en la torre, en el tejado, en los árboles. Mira: todo lo fuerte se hace, con su adorno, delicado.

Más rosas, más rosas, más rosas…

Parece, Platero, mientras suena el Ángelus, que esta vida nuestra pierde su fuerza cotidiana, y que otra fuerza de adentro, más altiva, más constante y más pura, hace que todo, como en surtidores de gracia, suba a las estrellas, que se encienden ya entre las rosas… Más rosas…. Tus ojos, que tú no ves, Platero, y que alzas mansamente al cielo, son dos bellas rosas.</p>
    </div>
    <div class="container" style="width: 300px; height: 800px;">
        <p>text here</p>
        <p><img src="img2.png"></p>
    </div>
    <div class="container" style="width: 300px; height: 800px;">
        <p>text here</p>
        <p><iframe width="50%" height="50%" src="https://www.youtube.com/embed/7rr0-km4C0g?si=Rl3s-zdfDSfXGEOP" title="vids" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        <br>
        <img src="tenor.gif">

        </p>
    </div>
    <div class="container" style="width: 300px; height: 800px;">
        <p>text here</p>
        <p><img src="img4.png"></p>
    </div>
    <div class="draggable" draggable="true" id="draggable">
        <div class="cover img"><img src="cat.png"></div>

    </div><br>


    <script>
        const draggable = document.getElementById('draggable');

        draggable.addEventListener('dragstart', (event) => {
            event.dataTransfer.setData('text/plain', null);
            event.dataTransfer.effectAllowed = 'move';
        });

        document.addEventListener('dragover', (event) => {
            event.preventDefault();
            event.dataTransfer.dropEffect = 'move';
        });

        document.addEventListener('drop', (event) => {
            event.preventDefault();
            draggable.style.left = `${event.clientX}px`;
            draggable.style.top = `${event.clientY}px`;
        });
    </script>
</body>
</html>

https://nervslayouts.neocities.org/drag

live preview!!!!!!!!!!!!!!!!