In JQuery UI, how can I decrement the count as items are dragged between droppable areas?

Question

I'm using JQuery UI 1.8.3, please see diagram below for my page setup.
I am counting the number of items dragged into droppable areas however the count is not correct when I drag an item out from A to B. For example, if I drag item 1 to box A the count (#) for box A becomes 1, but then if I drag item 1 from A to B, the count for box A remains 1 but I need it to decrement to 0.

  +------------------------+      +-----------------------+
  | Items (Dragable items) |      | A (Droppable Area)  # |
  |------------------------|      |-----------------------|
  |  item 1                |      |                       |
  |  item 2                |      |                       |
  |  item ...              |      +-----------------------+
  |  item n                |
  |                        |      +-----------------------+
  |                        |      | B (Droppable Area)  # |
  |                        |      |-----------------------|
  |                        |      |                       |
  |                        |      |                       |
  +------------------------+      +-----------------------+

My code looks like this to drop items:

$(".dropArea").droppable({
    ...
    drop: function(event, ui) {
    $(this).append($(ui.draggable));

    // count the items in the box and update
    ...
}

What would be the correct way to decrement the box count when an item is dropped out of the box A or B? Please let me know if anything doesn't make sense.

Thanks.

Answer 1

On each drop event, count the number of objects in each droppable area and update your counters.

Something like this would give you the count of objects:

$(".dropArea").each(function (index, elem) {
    $(item).find(".count").text($(this).find("div").size());
});