具有1个可拖动项的多个Droppable（JqueryUI）

Question

先生/女士，早上好，我想用1个可拖动项来更改两个可放置内容的背景颜色。我当前正在使用JqueryUI（http://api.jqueryui.com/droppable/#event-out）。

这是我现在的代码。 T_T

脚本：

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

        $( ".snaptarget" ).droppable({
            out: function( event, ui ) {
                $( this )
                .removeClass( "ui-state-highlight" )
                .find( "p" )
                .html( "Remove!" );
            }
        });
    } );

CSS：

.draggable{ 
    width: 200px;
    height: 80px; 
    padding: 5px; 
    float: left; 
    margin: 0 10px 10px 0; 
    font-size: .9em; 
}
.ui-state-highlight{
    background-color: pink !important;
}

.snaptarget { 
    height: 140px; 
    width: 200px;
    float: right;
}

HTML：

<div  class=" draggable ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable" class="snaptarget ui-widget-header">
    <p>1st Drop</p>
</div>
<div id="droppable" class="snaptarget ui-widget-header">
    <p>2nd Drop</p>
</div>

输出必须类似于此图片：Needed Output

我对这些东西还是陌生的。请帮助我，非常感谢:(