ondragleaveEreignis

/* Wird während des Ziehens 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 = "Das Ziehen des p-Elements wird gestartet.";
//Deckkraft des gezogenen Elements ändern
    event.target.style.opacity = "0.4";
});
//Während das p-Element gezogen wird, die Farbe des Ausgabetexts ändern
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 abgeschlossen.";
    event.target.style.opacity = "1";
});
/* Wird ausgelöst, nachdem das Ziehen abgeschlossen ist */
// Wenn das p-Element das Ziehen abgeschlossen hat und in droptarget eintritt, ändern Sie den Rahmenstil des 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. Zum Ablegen müssen wir das Standardverhalten des Elements verhindern.
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Wenn das ziehbare p-Element das droptarget verlässt, setzen Sie den Rahmenstil des div zurück
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* Für Drop: Verhindern Sie die Standardverarbeitung von Daten durch den Browser (Links werden standardmäßig bei 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));
    }
});