How to count dropped items in droppable area jquery

Question

I am able to count dropped items in dropped area. Here is fiddle . So what i need is subtraction of the count when item is dragged out. Script i use to drag and drop items. And also to make a count:

<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>

And the displayed number of dropped items in :

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

I noticed that its keep counting correctly even if i dragged the item out. as is getting .length of the dropped area. The only problem is how to update text("Items Dropped: " + n + "."); field?

Answer 1

JQuery Droppable has an event out( event, ui ) to know when some element is out of the droppable div, with which you can get the count value again.

JQuery Droppable - out event

I have created a sample fiddle which will show the count of items dropped.

Fiddle

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

Hope this helps you in solving your problem.

-Help :)