2つの異なるターゲットにJqueryをドロップ

Question

私はこれを単純化しようとしましたが、まだ問題があります。 私は、「フルーツ」または「veg」の2つの回答オプションがある場合に、ドラッグ＆ドロップクイズを作成しようとしています。私はそれぞれのアイテムが適切な場所に落とされたら、各アイテム（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が例を挙げて解決策を見つけることができました。コードを修正して、2つのドロップ可能領域を作成できました... here's the fiddle