ondragEvent

/* Triggered 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 the p element is dragged
document.getElementById("demo").innerHTML = "Start dragging the p element.";
// Modify 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 is done being dragged, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Completed dragging the p element";
    event.target.style.opacity = "1";
});
/* Triggered after the drag is completed */
// When the p element is dragged into the droptarget, change the div's border style
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 element's default handling
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the div's border style
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 get 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));
    }
});