多次拖放事件後的警報觸發器

Question

我得承認，我幾乎是一個noob，但我一直在努力與這一個。在兩次下降發生後我都必須觸發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 S和其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!") 
    }); 
}); 

的演示中看到this fiddle（！點擊這兩個按鈕，看魔術發生），並瞭解$.Deferred和$.when