April 29, 2012
Counting the number of DIVs placed into a DIV via drag and Drop
Question by Jiggles
I have had a look about the site and found some code and tried it out but its not working in any shape or form.
I am wanting to count the number of DIVs thats placed into another DIV by the user dragging and dropping but only to count the ‘correct’ ones then if all the correct ones are in the DIV display an alert saying well done then rest the ‘game’. Also need to show how many more is needed to go to ‘win’.
This is what I have so far:
JS:
$('.drop').each(function(){
var n = $(this).children('.draggable').length;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
});
HTML:
<div class="foods">
<div class="draggable" id="draggable"><img src="images/fish.png" id="draggable"></div>
<div class="draggable" id="draggable"><img src="images/stone.png"></div>
<div class="wrong"><img src="images/tree.png"></div>
</div>
<div class="foods">
<div id="droppable" class="drop">
<p>Drop here</p>
</div>
</div>
<div class="foods">
<span class="count"></span>
</div>
JS Fiddle of the code: http://jsfiddle.net/JRLZK/
Thanks in advanced for any help!
Answer by 350_Design
This should do it with your logic.
$(function() {
var n = 0;
$( ".draggable" ).draggable();
$( ".wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui) {
console.log($(ui));
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
n++;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
Answer by Starx
The problem is the duplicate IDs you are giving. I used class instead of id, but you can apply your own logic there.
$( "#droppable" ).droppable({
drop: function( event, ui) {
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
Update
Here is a workaround for the count
var div = $("<div />"); //a temp container
$( "#droppable" ).droppable({
drop: function( event, ui) {
ui.draggable.clone().appendTo(div);
if(div.children(".draggable").length == 2) {
alert('correct');
}
}
});
