Drag and Drop

[Jessica Norbach]

Bom dia pessoal, estou desenvolvendo um projeto pra faculdade e estou com uma dificuldade.

eu preciso arrastar uma imagem de uma div para outra div, eu fiz o script e esta funcionando bem, como este aqui 

A função arrasta e solta

<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>

o estilo 

<style>
 #div2, #div4, #div6, #div8, #div10, #div12, #div14, #div16, #div1, #div3 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    }
</style>

 

e a movimentação delas

                          <div id="div1"  ondrop="drop(event)" ondragover="allowDrop(event)">
                          <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
                        </div>
                        <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
                          <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag3" width="88" height="31">
                        </div>

esta e onde fica a imagem na primeira div para ser arrastada para a próxima div 

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

e aqui onde as imagens vão ser soltas 

vou anexar uma foto do layout para ficar melhor de compreender

A minha duvida é como eu faço para onde soltar só armazenar uma imagem por vez porque agora ela esta armazenado duas imagens dentro da mesma div, e só pode ter uma dentro de cada div.

 

Agradeço a ajuda desde já.