jQuery UI Draggable and Droppable: Call a function when all draggable elements on the page are dropped

Question

I am having some trouble figuring out how to call a function after all draggable elements are dropped. I have two side-by-side columns. The list on the right contains 8 elements that are dropped to the left column, also with 8 elements (a matching game). I can call a function, (alert("drop")) in the code below, when each item is dropped, but how do I call a function after all the elements on the page have been dropped? Thanks!

<script type="text/javascript">
  $(function() {
    $(".draggable").draggable({
    snap: ".snapTarget",
    snapMode: "inner",
    snapTolerance: 15,
    revert: "invalid"
    });

    $(".word1 .wordBg").draggable({
    snapTolerance: 15,
    revert: "invalid"
    });
    $(".word1").droppable({
    accept: ".word1",
    drop: function(){
    alert("drop");
   }
   });
  .... word2 . . .
  .... word8 
  });
  </script>

Answer 1

Thanks to gp and silver in the comments above, here is the working code:

<script type="text/javascript">
$(".kaminari_match_pagination").hide()
var dropCount = 0;
var wordCount = $('.word').length / 2;

$(function() {
$(".draggable").draggable({
  snap: ".snapTarget",
  snapMode: "inner",
  snapTolerance: 15,
  revert: "invalid"
  });

$(".word1 .wordBg").draggable({
  snapTolerance: 15,
  revert: "invalid"
  });
$(".word1").droppable({
  accept: ".word1",
  drop: function(){
  dropCount++;
    if (dropCount === wordCount) {
      $(".kaminari_match_pagination").show();
 }
 });
 .... word2 . . .
 .... word8 
});
</script>