Search code examples
javascriptphpjqueryjquery-ui-draggablejquery-ui-droppable

Counting items inside two droppable objects

I have an accordion and two droppable boxes: box1 and box2. How can I count number of dropped items in both boxes in total. Here is fiddle.

I added function inside function(event, ui) { but if i have a loop of two or more it counts for every row. How i can separate it?

Here is code with loop:

<body style="background-color:white;" onload="startTime()"> 
<h1 class="ui-widget-header">Products</h1>    
<div id="myAccordion">
<h3><a href="#">T-Shirts</a></h3>
    <div>
        <ul>
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
        </ul>
    </div>
<h3><a href="#">Bags</a></h3>
    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
<h3><a href="#">Gadgets</a></h3>
    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
<label>
<?php
    $len=2;
    for($y=0;$y<$len;$y++)
    {
        echo "<div class='proc'> <pre>";
        echo "<span> </span><br /></pre>";  
?>
    <div id="procLeader">
        <label>Box1:</label>
        <div class="ui-widget-content">
        <div id="procleader">
            <ol>
                <li class="placeholder" name="procleader">Add here</li>
                <input type="hidden" name="procleader" id="hiddenListInput3" />
            </ol>
        </div>
        </div>
    </div>
    <div id="procChecker">
        <label>Box2:</label>
        <div class="ui-widget-content">
        <div id="procchecker">
            <ol>
                <li class="placeholder" name="procchecker">Add here</li>
                <input type="hidden" name="procchecker" id="hiddenListInput4" />
            </ol>
        </div>
        </div>
    </div>
<?php       
    echo "</div>";                      
    }
?>
</label>
</body>
Solution

  • that should work, try to move the following lines

    var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Dropped: " + n + ".");

    inside

    drop: function(event, ui)

    so your final code would be something like:

    //add style
$('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
var n = $( ".dropClass" ).length;   
$( "span" ).text( "Items Dropped: " + n + ".");

    Try this fiddle.