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>