jquery - ボックスを 1 つの div から複数の div にドラッグ アンド ドロップする

Question

幅 60px (ccarcellbook) の div を幅 20px (ccarcell) の 3 つの div にドロップしたいと思います。大きなdivが小さなdivの1つを置き換えるように基本的なdnd関数を持っていますが、3つの小さなdivを置き換える方法がわかりません

jquery

$('.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));
  }
});

html

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

どんなアドバイスでも歓迎