jquery - すべてのカラードラッグが正しいカラードロップでのみ受け入れられるように、このjqueryの例を変更しようとしています

Question

すべてのカラー ドラッグが正しいカラー ドロップでのみ受け入れられるように、この jquery の例を変更しようとしています。

コードは次のとおりです。

<script>
$(function() {
    $( "#draggable1" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });
    $( "#draggable3" ).draggable({ revert: "valid" }); 

    $( "#droppable2" ).droppable({activeClass: "ui-state-hover" });
    $( "#droppable3" ).droppable({activeClass: "ui-state-hover" });
    $( "#droppable1" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    });
}); 
</script>

And the divs are:
<div id="droppable1" class="ui-widget-header">
  <p> Red drop </p>
</div>
<div id="droppable2" class="ui-widget-header">
  <p> Green drop </p>
</div>
<div id="droppable3" class="ui-widget-header">
  <p> Blue drop </p>
</div>
<div id="draggable1" class="ui-widget-content">
  <p> Red drag </p>
</div>
<div id="draggable2" class="ui-widget-content">
  <p> Green drag </p>
</div>
<div id="draggable3" class="ui-widget-content">
  <p> Blue drag </p>
</div>