1

私は認めざるを得ません、私はほとんど初心者ですが、私はこれに苦労しています. if両方のドロップが発生した後にトリガーする必要がありますが、現在はロード時にトリガーされます。私はそこに何が欠けていますか？

$(function() {
    $( "#draggable" ).draggable({
        revert: "invalid",
        snap: "#droppable",
    });
    $( "#droppable" ).droppable({
        accept: "#draggable",
        drop: function() {
            $("#whistle").get(0).play();
            $(this).data(droppable)
        }
    });
    $( "#draggable2" ).draggable({
        revert: "invalid",
        snap: "#droppable",
    });
    $( "#droppable2" ).droppable({
        accept: "#draggable2",
        drop: function() {
            $("#whistle").get(0).play();
            $(this).data(droppable2)
        }
    });
    if ($.queue(2)) {
        $("#whistle2").get(0).play();
        alert ("done!")
    }
});
4

1 に答える 1

0

2 つ$.Deferredの とそれらのpromise-objects を使用して、ハンドラーをトリガーできます。

$(function() {

    var dfd1 = $.Deferred();
    var dfd2 = $.Deferred();

    $( "#draggable" ).draggable({
        revert: "invalid",
        snap: "#droppable",
    });
    $( "#droppable" ).droppable({
        accept: "#draggable",
        drop: function() {
            $("#whistle").get(0).play();
            $(this).data(droppable);
            dfd1.resolve();
        }
    });
    $( "#draggable2" ).draggable({
        revert: "invalid",
        snap: "#droppable",
    });
    $( "#droppable2" ).droppable({
        accept: "#draggable2",
        drop: function() {
            $("#whistle").get(0).play();
            $(this).data(droppable2);
            dfd2.resolve();
        }
    });
    //this will trigger when both dfds have been resolved
    $.when(dfd1.promise(), dfd2.promise()).then(function(){
        $("#whistle2").get(0).play();
        alert ("done!")
    });
});

デモについては、このフィドルを参照してください(両方のボタンをクリックして、魔法が起こるのを確認してください) $.Deferred。$.when

于 2012-10-16T11:34:52.517 に答える