Drag and Drop Element doesn't Drop?

Hello & Thanks,
My Drag and Drop Element doesn’t Drop:
Can someone please show me my error ?

<!DOCTYPE HTML>
<html>
<head>
<style>
 *
 {
    margin: 0px;
    pdding: 0px;	
 }
 
 .dragzone, .dropzone {
    height: 400px;
    width: 40%;
    border: 2px solid black;	
	float: left;
	margin-top: 10px;
	margin-left: 7%;
	
 }
</style>
<script>
var id; 
var ev;
function allowDrop(ev)
{
    ev.preventDefault();
}

function dragStart(ev)
{
    id=ev.target.id;
	
    function showMeFunction() {}; 
	
//	alert(id);
}

function drop(ev)
{
    ev.target.append(document.getElementById(id));
}

</script>
<script>
function showMeFunction() {
  var x = document.getElementsByClassName("showMeStyle")[0].className;
  var y = document.getElementById("showMe").className;
  document.getElementById("showMe").innerHTML = "Using getElementsByClassName: " + x + "<br>" + "Using getElementById: " + y;
}
</script>

</head>
<body>
<h5>Draggable-Element-Forum.html</h5>
<div id="showMe" class="showMeStyle">Show Me</div>
<div class="dragzone"> 
<img src="smiley.gif" id="dragelement" 
                height="50px" ondragstart="dragStart(event)">
</div>
<div class="dropzone" ondragover="allowDrop(event)">
</div>

</body>
</html>

Thank you very much !