Here is one way it could be done:
var done = true;
$("#bottle, #butterfly").draggable({
revert: "invalid", containment: "#wrapper",
start: function(event, ui){
if(!done)
return false;
},
stop: function(event, ui){
if($(".correct").length == $(".drop").length){
setTimeout(function(){
alert('All items have been matched!');
},2000);
}
}
});
$("#bottleDrop").droppable({
accept: "#bottle",
drop: function(event, ui) {
if(ui.draggable.is("#bottle")){
$(this).addClass("correct").find("p").html("correct!");
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000);
}
}
});
$("#butterflyDrop").droppable({
accept: "#butterfly",
drop: function(event, ui) {
if(ui.draggable.is("#butterfly")){
$(this).addClass("correct").find("p").html("correct!");
done = false;
ui.draggable.fadeOut(2000);
$(this).fadeOut(2000,function(){
done = true;
});
}
}
});
Example: