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/
精彩评论