ondropEvento

/* Se activa al arrastrar */
document.addEventListener("dragstart", function(event) {
//El método dataTransfer.setData() establece el tipo de datos y los datos arrastrados
    event.dataTransfer.setData("Text", event.target.id);
// Muestra algo de texto al arrastrar el elemento p
document.getElementById("demo").innerHTML = "Comenzando a arrastrar el elemento p.";
// Modifica la opacidad del elemento arrastrado
    event.target.style.opacity = "0.4";
});
// Mientras arrastra el elemento p, cambia el color del texto de salida
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// Cuando se termina de arrastrar el elemento p, muestra algunos elementos de texto y restablece la opacidad
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Se completó el arrastre del elemento p";
    event.target.style.opacity = "1";
});
/* Se activa después de completar el arrastre */
// Cuando el elemento p completa el arrastre y entra en droptarget, cambia el estilo del borde del div
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// De forma predeterminada, los datos/los elementos no se pueden arrastrar y soltar dentro de otros elementos. Para drop debemos evitar el manejo predeterminado del elemento
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// Cuando el elemento p arrastrable sale de droptarget, restablece el estilo del borde del div
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* Para drop, evita el manejo predeterminado de los datos del navegador (en drop los enlaces se abren de forma predeterminada)
Restablece el color del texto de salida y el color del borde del DIV
Utiliza el método dataTransfer.getData() para obtener los datos arrastrados
El id del elemento de datos arrastrado ("drag1")
Adjunta el elemento arrastrado al elemento drop*/
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));
    }
});