jquery - 在 JQuery UI 中，当项目在可放置区域之间拖动时，如何减少计数？

Question

我使用的是 JQuery UI 1.8.3，请参阅下图了解我的页面设置。
我正在计算拖入可放置区域的项目数量，但是当我将项目从 A 拖出到 B 时，计数不正确。例如，如果我将项目 1 拖到框 A，则框 A 的计数 (#) 变为 1，但是如果我将项目 1 从 A 拖到 B，框 A 的计数仍为 1，但我需要它减少到 0。

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

我的代码如下所示，用于删除项目:

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

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

当元素从盒子 A 或 B 中掉出时，减少盒子数量的正确方法是什么？如果有任何不明白的地方，请告诉我。

谢谢。

Answer 1

在每次放置事件中，计算每个可放置区域中的对象数量并更新计数器。

像这样的东西会给你对象的数量:

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