javascript - 通过拖放计算放入 DIV 的 DIV 数量

Question

我查看了该站点并找到了一些代码并进行了尝试，但它无法以任何形式或形式工作。

我想计算通过用户拖放放置到另一个 DIV 中的 DIV 的数量，但只计算“正确”的 DIV，然后如果所有正确的 DIV 都在 DIV 中，则会显示一个警报，说做得好，然后休息“游戏” '。还需要显示要“赢”还需要多少。

这是我到目前为止所拥有的：

JS：

    $('.drop').each(function(){ 
        var n = $(this).children('.draggable').length;
        $(".count").text("There are " + n + " divs inside parent box detail.");
        if(n == 2){
        alert("You got them all right! :)");
        }
        });

HTML：

    <div class="foods">
              <div class="draggable" id="draggable"><img src="images/fish.png" id="draggable"></div>

              <div class="draggable" id="draggable"><img src="images/stone.png"></div>

              <div class="wrong"><img src="images/tree.png"></div>
            </div>

<div class="foods">                
<div id="droppable" class="drop">
<p>Drop here</p>
</div>
</div>

<div class="foods">
        <span class="count"></span> 
</div>

JS Fiddle 代码：http: //jsfiddle.net/JRLZK/

Answer 1

问题是您提供的重复 ID。我使用了 class 而不是 id，但你可以在那里应用你自己的逻辑。

$( "#droppable" ).droppable({    
    drop: function( event, ui) {
        if($(ui.draggable).hasClass("draggable")){
        $( this )
            .find( "p" )
                .html( "Correct! :)" );
        } else {
                $( this )
                .find( "p" )
                .html( "Wrong! :(" );
        }
    }
}); 

演示

---

更新

这是计数的解决方法

var div = $("<div />"); //a temp container
$( "#droppable" ).droppable({    
    drop: function( event, ui) {
        ui.draggable.clone().appendTo(div);
        if(div.children(".draggable").length == 2) {
            alert('correct');
        }
    }
}); 

演示

Answer 2

这应该用你的逻辑来做。

 $(function() {
    var n = 0;
    $( ".draggable" ).draggable();
    $( ".wrong" ).draggable();

    $( "#droppable" ).droppable({    
        drop: function( event, ui) {
            console.log($(ui));
            if($(ui.draggable).hasClass("draggable")){
            $( this )
                .find( "p" )
                 .html( "Correct! :)" );
                n++;
        $(".count").text("There are " + n + " divs inside parent box detail.");
        if(n == 2){
        alert("You got them all right! :)");
        }

            } else {
                    $( this )
                    .find( "p" )
                    .html( "Wrong! :(" );
            }
        }
    });
});