ondropEreignis

/* Wird beim Ziehen ausgelöst */
document.addEventListener("dragstart", function(event) {
//Die Methode dataTransfer.setData() legt den Datentyp und die gezogenen Daten fest
    event.dataTransfer.setData("Text", event.target.id);
// Gibt etwas Text aus, wenn das p-Element gezogen wird
document.getElementById("demo").innerHTML = "Començat a traer li p element.";
// Changear li opacitá del traet element
    event.target.style.opacity = "0.4";
});
// Die Farbe des Ausgabetexts ändern, während das p-Element gezogen wird
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// Wenn das p-Element gezogen wurde, etwas Text ausgeben und die Deckkraft zurücksetzen
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Das Ziehen des p-Elements wurde beendet";
    event.target.style.opacity = "1";
});
/* Wird ausgelöst, nachdem der Drag-Vorgang abgeschlossen ist */
// Quande li p element es traet in droptarget, changear li stile de bord del div
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// Standardmäßig können Daten/Elemente nicht in andere Elemente abgelegt werden. Für das Ablegen müssen wir die Standardbehandlung des Elements verhindern
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Wenn das ziehbare p-Element droptarget verlässt, setze den Rahmenstil des div zurück
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* Beim Drop: Verhindern Sie die Standardbehandlung von Daten durch den Browser (Links werden standardmäßig beim Drop geöffnet)
Farbe des Ausgabetexts und Rahmenfarbe des DIV zurücksetzen
Verwenden Sie die Methode dataTransfer.getData(), um die gezogenen Daten abzurufen
Die ID des gezogenen Datenelements ("drag1")
Das gezogene Element an das Drop-Element anhängen*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});