Question

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?

Answer 1

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/