对剩余项目进行计数以计算百分比

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); 
    }); 

});