HTML5 drag and drop not working

HTML5 drag and drop not working

by j08691

HTML

<div id="content-area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag-me" draggable="true" ondragstart="drag(event)">Drag me!</div>

CSS

#content-area {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}