<!-- Liste réordonnable en drag & drop pur HTML/JS -->
<ul id="liste-taches">
    <li draggable="true" data-id="1">Écrire la doc</li>
    <li draggable="true" data-id="2">Corriger le bug #42</li>
    <li draggable="true" data-id="3">Relire la PR</li>
</ul>

<!-- Zone de dépôt pour fichiers -->
<div id="zone-depot" class="zone-depot">
    Glissez des fichiers ici
</div>

// --- Réordonnancement de liste ---
const liste = document.getElementById("liste-taches");
let elementTraine = null;

liste.addEventListener("dragstart", (e) => {
    elementTraine = e.target;
    e.dataTransfer.effectAllowed = "move";
    // dataTransfer transporte des données entre source et cible, même
    // entre deux documents/fenêtres différents
    e.dataTransfer.setData("text/plain", e.target.dataset.id);
    // Léger délai avant de styliser, sinon l'image fantôme de drag
    // reprend déjà le style "en cours de drag"
    requestAnimationFrame(() => e.target.classList.add("en-cours-drag"));
});

liste.addEventListener("dragend", (e) => {
    e.target.classList.remove("en-cours-drag");
    elementTraine = null;
});

liste.addEventListener("dragover", (e) => {
    // OBLIGATOIRE : sans preventDefault ici, "drop" ne se déclenche jamais
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";

    const apres = elementApres(liste, e.clientY);
    if (apres == null) {
        liste.appendChild(elementTraine);
    } else {
        liste.insertBefore(elementTraine, apres);
    }
});

function elementApres(container, y) {
    const elements = [...container.querySelectorAll("li:not(.en-cours-drag)")];

    return elements.reduce((plusProche, enfant) => {
        const rect = enfant.getBoundingClientRect();
        const decalage = y - rect.top - rect.height / 2;

        if (decalage < 0 && decalage > plusProche.decalage) {
            return { decalage, element: enfant };
        }
        return plusProche;
    }, { decalage: Number.NEGATIVE_INFINITY }).element;
}

// --- Import de fichiers par glisser-déposer ---
const zoneDepot = document.getElementById("zone-depot");

["dragenter", "dragover"].forEach((evt) => {
    zoneDepot.addEventListener(evt, (e) => {
        e.preventDefault(); // nécessaire aussi pour autoriser le drop
        zoneDepot.classList.add("survol-actif");
    });
});

["dragleave", "drop"].forEach((evt) => {
    zoneDepot.addEventListener(evt, () => {
        zoneDepot.classList.remove("survol-actif");
    });
});

zoneDepot.addEventListener("drop", (e) => {
    e.preventDefault();

    const fichiers = [...e.dataTransfer.files];
    // dataTransfer.files : FileList, identique à <input type="file">
    const images = fichiers.filter((f) => f.type.startsWith("image/"));

    images.forEach((fichier) => {
        const lecteur = new FileReader();
        lecteur.onload = () => {
            const img = document.createElement("img");
            img.src = lecteur.result; // data: URL en base64
            img.alt = fichier.name;
            zoneDepot.appendChild(img);
        };
        lecteur.readAsDataURL(fichier);
    });
});

.en-cours-drag { opacity: 0.4; }
.zone-depot { border: 2px dashed #999; padding: 32px; text-align: center; }
.zone-depot.survol-actif { border-color: #2563eb; background: #eff6ff; }