在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());
});