How to count dropped items in droppable area jquery
<p>I am able to count dropped items in dropped area. Here is <a href="https://jsfiddle.net/montel388/ny1n9gm0/7/" rel="nofollow">fiddle</a>. 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:</p>

<pre><code>&lt;script&gt;
$(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();
        $("&lt;li&gt;&lt;/li&gt;").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();
        $("&lt;li&gt;&lt;/li&gt;").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 &gt; -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("&lt;input type='hidden' name='leader[]' value='"+values+"' /&gt;");
          $("#output").append("&lt;p&gt;"+values+"&lt;/p&gt;");
              console.debug(listCSV);
        });
    }
}
&lt;/script&gt;
</code></pre>

<p>And the displayed number of dropped items in :</p>

<pre><code> $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");
</code></pre>

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