對剩餘項目進行計數以計算百分比

Question

我有一個頁面，用戶必須從屏幕上其他位置的某個區域拖動項目。

當所有項目都被拖出 - 完成100％的任務。

我想計算每次拖放操作（當某個項目被拖出灰色區域時）完成的任務的百分比。

如何計算一個區域內的剩餘物品？

如何轉換爲百分比？

我應該計算每個項目的價值在頁面加載的百分比，然後減去？

Answer 1

基於克里斯五月的評論，試試這個：

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

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

這因爲從0％的首次下降至100％

小提琴從這裏開始：http://jsfiddle.net/qQdZy/

編輯： 這應該解決問題:)

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 + "%"); 
}); 

新小提琴：http://jsfiddle.net/qQdZy/1/

新的編輯： 好吧，我已經改變了我的解決方案。在這裏它的工作原理：

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 + "%"); 
}); 

小提琴：http://jsfiddle.net/qQdZy/3/

Answer 2

像這樣的東西應該工作。

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


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

});