多个丢弃事件后触发警报

Question

我必须承认，我几乎是一个菜鸟，但我一直在为此苦苦挣扎。我必须在两次下降发生后触发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!")
    }
});

Answer 1

您可以使用两个$.Deferred及其promise对象来触发处理程序：

$(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