ondropEvent

/* Fired when dragging */
document.addEventListener("dragstart", function(event) {
//The dataTransfer.setData() method sets the data type and the dragged data
    event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the dragged element
    event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// When the p element has been dragged, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element";
    event.target.style.opacity = "1";
});
/* Fired after the drag is completed */
// When the p element is dragged into droptarget, change the border style of the div
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// By default, data/elements cannot be dropped in other elements. For drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// When the draggable p element leaves droptarget, reset the border style of the div
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* For drop, prevent the browser's default handling of data (links are opened by default on drop)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to obtain the dragged data
The dragged data element id ("drag1")
Append the dragged element to the drop element*/
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));
    }
});