I am basically trying to create a drag and drop. and i came up with this

HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#my1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#my2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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));
}


</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>



<div id="my1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</div>

<br>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="my2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src="http://www.w3schools.com/html/img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</div>
</body>
</html>
it is currently allowing user to put 2 images in 1 div. what i want is this if the user already drag the image in the div then div will not allow the user to insert another image in it..One image in one div at a time will be a better script... Please help i am new to javascript