Tengo un div con elementos que puedo arrastrar a otros dos divs.
Quiero que cuando arrastre tres elementos a cada div, no me permita agregarle más.
El código que tengo, y que no me funciona bien, es el siguiente:
Código HTML:
<div class="demo"> <div id="content" > <div class="item"><img src="1.jpg" name="1" title="elm1"></div> <div class="item"><img src="2.jpg" name="2" title="elm2"></div> <div class="item"><img src="1.jpg" name="3" title="elm3"></div> <div class="item"><img src="2.jpg" name="4" title="elm4"></div> <div class="item"><img src="1.jpg" name="5" title="elm5"></div> </div> <div class="fs" id="id1"></div> <div class="fs" id="id2"></div> </div>
Código HTML:
$(".fs").sortable({
connectWith : '.fs',
revert: true,
helper: "clone",
receive: function(event, ui) {
if ($(this).children().length >= 3) {
$(this).sortable("cancel");
}
}
}).disableSelection();
$("#content .item").draggable({
connectToSortable: ".fs",
helper: "clone",
revert: "invalid"
})
Gracias
