Raahaa minua
Pudota tähän.
Tässä on
lapsielementtejä
, joiden yli kursori kulkee.
CSS
/* Esikatselualue määrittelee sekä taustan että tekstin värin, jotta pari on varmasti luettava kummassakin teemassa. */ #alue { background-color: #ffffff; color: #1a1a1a; padding: 0.5rem; } @media (prefers-color-scheme: dark) { #alue { background-color: #1e1e1e; color: #f0f0f0; } } #lahde { display: inline-block; padding: 0.5rem 1rem; border: 2px solid currentColor; cursor: grab; } #kohde { margin-top: 1rem; padding: 1rem; border: 2px dashed currentColor; } /* korostus kertoo, että pudotus on mahdollinen */ #kohde.pudotettavissa { background-color: #cceecc; color: #1a1a1a; }
HTML
<div id="alue"> <p id="lahde" draggable="true">Raahaa minua</p> <div id="kohde"> <p>Pudota tähän.</p> <p>Tässä on <strong>lapsielementtejä</strong>, joiden yli kursori kulkee.</p> </div> </div>
Javascript
/* suorita tämä koodi Run-painikkeella */ /* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat käsittelijät liitettäisiin toistamiseen. Siksi elementit korvataan kopioillaan: kopio ei peri tapahtumankäsittelijöitä. */ const puhdista = function (elementti) { const kopio = elementti.cloneNode(true); elementti.replaceWith(kopio); return kopio; }; const lahde = puhdista(document.getElementById("lahde")); const kohde = puhdista(document.getElementById("kohde")); lahde.addEventListener("dragstart", function (e) { e.dataTransfer.setData("text/plain", "Hei maailma"); }); /* Laskuri pitää kirjaa siitä, monessako sisäkkäisessä elementissä kursori on. Ilman sitä korostus vilkkuisi, koska dragleave laukeaa myös lapsielementeistä ja kuplii ylöspäin. KOKEILE: korvaa syvyyden tarkistus suoralla luokan poistolla ja liikuta kursoria kohteen sisällä. */ let syvyys = 0; kohde.addEventListener("dragenter", function (e) { e.preventDefault(); syvyys += 1; kohde.classList.add("pudotettavissa"); console.log("dragenter, syvyys " + syvyys); }); kohde.addEventListener("dragleave", function () { syvyys -= 1; console.log("dragleave, syvyys " + syvyys); if (syvyys === 0) { kohde.classList.remove("pudotettavissa"); } }); kohde.addEventListener("dragover", function (e) { e.preventDefault(); }); kohde.addEventListener("drop", function (e) { e.preventDefault(); /* laskuri on nollattava, koska pudotuksen jälkeen dragleave ei tule */ syvyys = 0; kohde.classList.remove("pudotettavissa"); console.log("drop: " + e.dataTransfer.getData("text/plain")); });
Konsoli