Drag & drop: pienin toimiva esimerkki

CSS

HTML

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");
  console.log("dragstart");
});

/* KOKEILE: kommentoi seuraava preventDefault pois ja aja uudelleen.
   Pudotus ei enää onnistu, eikä drop-tapahtumaa tule lainkaan.
   Selaimen oletustoiminto on KIELTÄÄ pudotus. */
kohde.addEventListener("dragover", function (e) {
  e.preventDefault();
});

kohde.addEventListener("drop", function (e) {
  e.preventDefault();
  kohde.textContent = e.dataTransfer.getData("text/plain");
  console.log("drop");
});

/* dragend laukeaa aina, myös kun raahaus keskeytyy */
lahde.addEventListener("dragend", function () {
  console.log("dragend");
});

CSS

HTML

Javascript

Konsoli