Drag n Drop boxes

[кирикала]

Здравствуйте люди,
такого рода вопрос...
есть две области предположим например
первая 50px на 100px (пустая)
вторая 150px на 50px (в ней три елемента по 50px на 50px картинки) например boxA boxB boxC итого как раз 150px на 50pх
пишу код чтобы можно было их перетаскивать в первую область
не могу понять как сделать так чтобы они не накладывались друг на друга (ну тоесть чтобы влазило в первую область так как задано по размеру - две картинки) вот код

HTML

<div id="skovor"></div>
<div id="big" ondragenter="return dragEnter(event)"
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)"></div>
<section id="section"  ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<div class="drag" id="boxA" draggable="true" ondragstart="return dragStart(event)"></div>
<div class="drag" id="boxB" draggable="true" ondragstart="return dragStart(event)"></div>
<div class="drag" id="boxC" draggable="true" ondragstart="return dragStart(event)"></div>
<br>

</section>

JS

function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,100,100);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
     event.preventDefault();
}
function dragDrop(ev) {
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
   ev.stopPropagation();
   return false;
}

СSS

.drag {
  width: 150px;
  height: 150px;
  background-size: cover;
  display: inline-block;
  margin-right: 10px;
}
#boxA{
  margin-right: 0px;
  background-image: url(1.png) ;
}
#boxB{
  margin-right: 0px;
  background-image: url(2.png) ;
}
#boxC{
  margin-right: 0px;
  background-image: url(3.png) ;
}
#big {
  width: 150px;
  height: 300px;
  margin: 100px;
}
#skovor{
  position:absolute;
  z-index: -10;
  margin: -60px 0 0 -20px;
  width: 675px;
  height: 400px;
  background-image: url(5.png) ;
  background-size: cover;
}
section {
  width: 715px;
  height: 200px;
  margin: 20px;
}

короче сделать так чтоб в область влазило из трех только два елемента а то третий если перетащить он поверх первого нагло накладывается(