如何計算可丟棄區域中的丟棄項目jquery

Question

我可以對丟棄區域中丟棄的項目進行計數。這裏是fiddle。所以我需要的是當物品被拖出時減去計數。 我用來拖放物品的腳本。而且也使計數：

<script> 
$(function() { 
    var itm = []; 
$("#savebutton").click(function() { LISTOBJ.saveList(); }); 
    $("#myAccordion").accordion({ 
    heightStyle: "content", 
    active: false, 
    collapsible: true 
    }); 
    $("#myAccordion li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
    }); 
    $(".leader ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var zz = ui.draggable.text() 
     var xyz = itm.includes(zz); 
     if (xyz === false) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()) 
      //.addClass("cart-item") 
      .addClass('dropClass') 
      .appendTo(this); 

     //add to array 
     itm.push(zz); 
     //add style 
     //$('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
     var n = $(this).closest("div.proc").find(".dropClass").length; 
     $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

     } else { 
     alert('Name is Already Exist'); 
     } 

    } 
    }).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
    }); 
    $(".checker ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var zz = ui.draggable.text() 
     var xyz = itm.includes(zz); 
     if (xyz === false) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()) 
      //.addClass("cart-item") 
      .addClass('dropClass') 
      .appendTo(this); 

     //add to array 
     itm.push(zz); 
     //add style 
     $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
     var n = $(this).closest("div.proc").find(".dropClass").length; 
     $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

     } else { 
     alert('Name is Already Exist'); 
     } 

    } 
    }).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
    }); 
    $("#myAccordion ul").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).remove(); 
     var zz = ui.draggable.text() 
     $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred'); 

     var indexItm = itm.indexOf(zz); 
     if (indexItm > -1) { 
     itm.splice(indexItm, 1); 
     } 
    }, 
    hoverClass: "ui-state-hover" 
     //accept: '.cart-item' 
    }); 
}); 
var LISTOBJ = { 
    saveList: function() { 
     $(".leader").each(function() { 
      var listCSV = []; 
      $(this).find("li").each(function(){ 
       listCSV.push($(this).text()); 
      }); 
      var values = listCSV.join(', '); 
      $(".output").append("<input type='hidden' name='leader[]' value='"+values+"' />"); 
      $("#output").append("<p>"+values+"</p>"); 
       console.debug(listCSV); 
     }); 
    } 
} 
</script> 

並在顯示的數字下降的項目：

$(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

我注意到，它保持正確計數即使我拖着項目了。正如得到.length的下降區域。唯一的問題是如何更新text("Items Dropped: " + n + ".");字段？

Answer 1

JQuery Droppable有一個事件out(event, ui)知道什麼時候某個元素不在droppable div中，可以通過它再次獲取計數值。

JQuery Droppable - out event

我創建了一個樣本小提琴，它會顯示物品的數量下降。

Fiddle

out:function(event, ui){ 
     count= count-1; 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Out!"); 
      $("#count").text(count); 
     } 

希望這有助於您解決問題。

-Help :)