0

ドロップ可能に奇妙な問題があります。http://jsfiddle.net/samanth/dykcV/16/この例は非常にうまく機能します。ドロップ可能に div をドロップすると、その上に他のものをドロップすることはできません。私のアプリケーションには同じコードがありますが、ドロップ可能なものはドロップを受け入れます。

ドロップする前に AJAX 呼び出しがあります。これは問題になる可能性がありますか？

これが私の実際のコードです。

$(".dropItem").droppable({
    accept:'.dragItem',
    hoverClass: 'hovered',

    drop:function (event, ui) {
        var answerNumber = $(this).attr( 'id' );
        var questionNumber = ui.draggable.attr( 'id' );

        $(this).append($(ui.draggable));

        //Send ajax query and get the response here..
        // generating form data

        send('matchAnswer?gameId=' + gameId + '&answerId=' + answerNumber + '&questionId=' + questionNumber, function (e) {
            if (this.status == 200) {
                var resp = this.responseText;
                if ( resp == "true" ) {
                    $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }).draggable ("disable").css ({ opacity : 1 });
                    $(this).droppable('option', 'disabled', true);
                } else {
                    // do something here
                }
            }
        }, formData);
    }
});
4

1 に答える 1

0

Ajax 呼び出しが問題です。何が起こっているのかを分析しましょう：

  1. ドラッグ可能なアイテムがドロップ可能なアイテムにドロップされる
  2. あなたのドロップメソッドは、ドラッグ可能なアイテムをドロップ可能なアイテムに追加します
  3. 次に、drop メソッドが ajax 呼び出しを実行します
  4. ajax 呼び出しが完了し、ステータス コードが 200 の場合は、いくつかの小さな CSS 調整を行い、ドロップ可能なアイテムがそれ以上ドラッグ可能なアイテムを受け取らないようにする機能を無効にします。

あなたが概説した問題は、ドロッパブルが複数のドラッグ可能なアイテムをその中に配置できるようになっていることです。したがって、問題は Ajax 呼び出しで発生します。自分でテストできなくても、次のいずれかの問題が発生していると思います。

AJAX 呼び出しが成功しない

確認するには: firebug を開き、AJAX 呼び出しの応答を確認します。

AJAX 呼び出しが 200 以外のステータス コードで返されます

確認するには: firebug を使用して、AJAX 呼び出しが返されたときに実行される関数をデバッグします。ステータスコードは 200 ですか?

このキーワードは、あなたが考えている要素を参照していません

確認するには: firebug を使用して、AJAX 呼び出しが返されたときに実行される関数をデバッグします。$(this) の値は?

$(this) があなたが思っているものではない場合、次の JavaScript コードが機能すると思います。

send('matchAnswer?gameId=' + gameId + '&answerId=' + answerNumber + '&questionId=' + questionNumber,
    $.proxy( function (e) {
    if (this.status == 200) {
        var resp = this.responseText;
        if ( resp == "true" ) {
            $(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" }).draggable ("disable").css ({ opacity : 1 });
            $(this).droppable('option', 'disabled', true);
        } else {
            // do something here
        }
    }
}, this), formData);

上記のコードで重要なのは、実行される関数が正しいスコープを維持するように $.proxy を使用していることです。詳細: http://api.jquery.com/jQuery.proxy/

于 2012-10-05T05:22:35.267 に答える