Jquery掉入2个不同的目标

Question

好吧我试图简化这个，但仍然有问题。 我试图做一个拖放测验，有两个答案选项，'水果'或'蔬菜'。我试图在每个项目放在正确的位置时制作每个项目（div），我希望它会逐渐消失，并在结尾处显示“做得好”的消息。

$(function() { 
    $("#draggable").draggable({ revert: "valid" }); 
    $("#draggable2").draggable({ revert: "invalid" }); 

    $("#droppable").droppable({ 
     classes: { 
     "ui-droppable-active": "ui-state-active", 
     "ui-droppable-hover": "ui-state-hover" 
     }, 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 

https://jsfiddle.net/lampboy2000/dtvt1sj8/ 

Answer 1

我设法从开发人员Steve Fenton的示例中找到解决方案。我修改了他的代码，并能够创建两个可投放区域... here's the fiddle