Hi,
The "hemmington" div is 60px wide and I would like to drop onto the 3 divs marked 1,2,3 (they are 20px wide), hide the 3 divs - but be able to show them when i move the 60px div
Have been trying to use replaceAll instead of appendTo
- $('.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().replaceAll($(this).prev());
}
});
html
- <div class="ccarcellrow">
- <div class="ccarcellbook">Hemmington</div> <!--width 60px-->
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- </div>
- <div class="ccarcellrow">
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- <div class="ccarcell">1</div> <!--width 20px-->
- <div class="ccarcell">2</div> <!--width 20px-->
- <div class="ccarcell">3</div> <!--width 20px-->
- <div class="ccarcell"></div>
- <div class="ccarcell"></div>
- </div>