Question

Using jQuery, I am trying to capture and display the value of a div class when it is ‘dropped’.
For example, I want to display ’01:20′ when this particular element is dropped.
div class=’routineTime’>01:20 /div>

Additionaly, I want to sum and display a running total of these dropped elements.

I have an example in jsfiddle, but it’s only displaying the ‘routineTime’ of the first element
that is dropped. I need to sum and display ‘routineTime’ for each element that is dropped.

http://jsfiddle.net/n2learning/QfFQ9/9/

Appreciate any help!

DK

Answer 1

You need to implement a iterator for all the dropped elements inside the drop able section.

    drop: function(event, ui) {
        $('#info').find("h1").remove();

        var tmp, routineTime = [0, 0];
        $('.routineTime', $(this)).each (function () {
            tmp = $(this).text().split(':');

            if ($.trim(tmp[0]) == '') tmp[0] = 0;

            routineTime [0] += parseInt(tmp[0], 10);
            routineTime [1] += parseInt(tmp[1], 10);               
        });

        routineTime [0] += parseInt(routineTime [1]/60);
        routineTime [1] = routineTime[1]%60;

        $('#calcTime').html(routineTime [0] + ':' + routineTime [1]);

    }

DEMO

The addTime logic has its own complexity… which you need to implement inside the $.each

Edit: Added addTime logic.. Let me know how it goes.