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

Counting the number of DIVs placed into a DIV via drag and Drop

本文关键字：DIV 数量 拖放 计算      更新时间：2023-09-26

我看了一下这个网站，找到了一些代码并尝试了一下，但它不能以任何形状或形式工作。

我想计算用户拖放到另一个 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代码的小提琴：http://jsfiddle.net/JRLZK/

问题是您提供的重复 ID。我用类代替了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');
        }
    }
});

演示

这应该用你的逻辑来做。

 $(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! :(" );
            }
        }
    });
});
相关文章：