Question

我有一个手风琴和两个可放置的盒子：box1和box2。如何计算两个框中丢弃的项目总数。这是fiddle。

我在function(event, ui) {内添加了函数，但是如果我有一个两个或更多的循环，它会计入每一行。我怎么能分开呢？

这是带循环的代码：

<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>

Answer 1

应该有效，尝试移动以下行

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

内

drop: function(event, ui)

所以你的最终代码应该是：

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

试试这个fiddle。

Answer 2

删除

$( document.body ).append( $( ".dropClass" ) );

并添加函数drop

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

计算两个可放置对象内的项目

2 个答案: