Возможность множественного сброса с одним перетаскиваемым элементом (JqueryUI)

Question

Добрый день, мэм / сэр, я хочу поменять цвет фона обоих выпадающих материалов одним перетаскиваемым элементом. В настоящее время я использую JqueryUI ( http://api.jqueryui.com/droppable/).

Это мой код на данный момент. 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>

Выходные данные должны быть такими:

Я все еще новичок в этих вещах. Пожалуйста, помогите мне и большое спасибо:(