drag and drop one div to many divs

[thompom]

I would like to drg n drop a div with width 60px (ccarcellbook) onto 3 divs with width 20px (ccarcell). Have got basic d n d function so that the big div replaces one of small divs, but dont know how to replace 3 small divs

$('.ccarcellbook').draggable({
  helper:"clone",
  cursor: "move",
  snap:'.ccarcell', 
  snapMode:'inner'
});
$('.ccarcell').droppable({
  over: function(event, ui) {var $this = $(this)},
  drop:function(event, ui) {
  ui.draggable.detach().appendTo($(this));
  }
});

<div class="ccarcell"></div>
<div class="ccarcell"></div>
<div class="ccarcell"></div>
<div class="ccarcellbook>DRAG ME</div>
<div class="ccarcell"></div>
<div class="ccarcell"></div>
<div class="ccarcell"></div>

any advice welcome