ondragstartEreignis

/* 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 = "Ziehen des p-Elements wird gestartet.";
// Die Deckkraft des gezogenen Elements ändern
    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 Ziehen des p-Elements beendet ist, 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 das Ziehen abgeschlossen ist */
// Wenn das p-Element in das Drop-Ziel gezogen wird, ändere 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 gezogen und dort abgelegt werden. Für das Ablegen müssen wir das Standardverhalten des Elements verhindern
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Wenn das ziehbare p-Element das Drop-Ziel 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));
    }
});