ondragenterEreignis

/* 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 = "Beginnen Sie, das p-Element zu ziehen.";
// Die Deckkraft des gezogenen Elements ändern
    event.target.style.opacity = "0.4";
});
// Ändern Sie die Farbe des Ausgabetexts, während das p-Element gezogen wird
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// Wenn das p-Element gezogen wird, geben Sie etwas Text aus und setzen Sie die Deckkraft zurück
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 */
// Wenn das p-Element in das droptarget gezogen wird, ä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. Für das Ablegen müssen wir die Standardbehandlung 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 = "";
    }
});
/* 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));
    }
});