Count remaining items in order to calculate percentages

I have a page where a user has to drag items from an area elsewhere on a screen.

When all items are dragged out -- 100% task is accomplished.

I would like to calculate what % of the task is accomplished on each drag and drop (when an items is dragged out of gray area).

How do I count remaining items 开发者_开发技巧within an area?

How do I convert into percentages?

Shall I calculate what each item's worth in terms of % on page load and then subtract?

Something like this should work.

$(document).ready(function(){
    var startCount = $('#launchPad .card').length,


    $("#dropZone").bind( "drop", function(event, ui) {
        var currentCount = $('#launchPad .card').length;
        alert(currentCount/startCount);
    });

});

Based on Chris May's comment, try this :

var startCount = $("#launchPad .card").length;

$(".stack").bind( "drop", function(event, ui) {
    var currentCount = startCount - $("#launchPad .card").length + 1;
    alert(currentCount / startCount * 100 + "%");
});

Here it starts since the first drop from 0% to 100%

Fiddle here: http://jsfiddle.net/qQdZy/

EDIT : This should fix the problem :)

var startCount = $("#launchPad .card").length;

$(".stack").bind( "drop", function(event, ui) {
    var currentCount = startCount - $("#launchPad .card").length;
    if (currentCount != startCount)
        currentCount++;
    alert(currentCount / startCount * 100 + "%");
});

New fiddle : http://jsfiddle.net/qQdZy/1/

NEW EDIT : Ok, I have changed my solution. Here it works :

var startCount = $("#launchPad .card").length;
var moveFromLaunch = false;

$(".card").bind( "dragstart", function(event, ui) {
  moveFromLaunch = true;
});

$(".stack").bind( "drop", function(event, ui) {
    var currentCount = $("#launchPad .card").length;
    if (moveFromLaunch)
        currentCount--;
    currentCount = startCount - currentCount;
    moveFromLaunch = false;
    alert(currentCount / startCount * 100 + "%");
});

Fiddle : http://jsfiddle.net/qQdZy/3/