HTML - ondrop attribute in html - tutorial

Code

<!DOCTYPE html>
<html>
    <head>
        <title>html tutorial - html5 - html code - html form - In 30Sec by Microsoft Award MVP - | wikitechy ondrop attribute</title>
        <style>
            .drag_div {
                width: 100px;
                height: 35px; 
                padding: 10px;
                border: 1px solid #ff0000;
            }
        </style>
    </head>
    <body>
        <p>Drag the element:</p>
        <div class="drag_div" ondrop="drop(event)" ondragover= "dragOver(event)" >
            <p draggable="true" ondragstart="dragStart(event)" id="dragtarget">Drag me!</p>
        </div><br>
        <div class="drag_div" ondrop="drop(event)" ondragover="dragOver(event)" ></div>
        <p id="drag"></p>
        <script>
            function dragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
            }
            function dragOver(event) {
                event.preventDefault();
            }
            function drop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
                document.getElementById("drag").innerHTML = "The element was dropped";
            }
        </script>
    </body>
</html>

Result