在JQuery UI中，当项目在可拉放区域之间拖动时，我如何减少计数

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

本文关键字：拖动 何减少 之间 UI JQuery 项目 区域      更新时间：2023-09-26

我使用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中取出时，减少盒子计数的正确方法是什么?如果有什么不对劲的地方，请告诉我。

谢谢。

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

类似这样的语句会给出对象的数量:

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