1

私はサイトを見て、いくつかのコードを見つけて試してみましたが、どのような形や形でも機能しませんでした。

ユーザーがドラッグアンドドロップして別の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/

4

2 に答える 2

1

問題は、あなたが与えている重複した ID です。id の代わりに class を使用しましたが、そこに独自のロジックを適用できます。

$( "#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');
        }
    }
});

デモ

于 2012-04-28T23:56:03.583 に答える
0

これはあなたのロジックでそれを行う必要があります。

 $(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! :(" );
            }
        }
    });
});
于 2012-04-29T00:07:48.483 に答える