jQuery drop dragged element into many div's

Question

I try to drop dragged div into, for example, 3 div's.

I want to drop blue rectangle on 3 divs. When rectangle is dropped 3 div's have to change backgroud. I try to do this with draggable and droppable but it work only on to one element :(

$(function() {
    $( ".event" ).draggable( { 
        grid: [ 5, 0 ],
        containment: "parent"
        }).resizable({ 
            containment: "parent",
            grid: [ 5, 0 ],
            maxHeight: 40,
            maxWidth: 1000,
            minHeight: 40,
            minWidth: 60,
            handles: 'e, w',
            resize: function( event, ui ) {
                $( "#event" ).css("background-color", "blue");
            }
        });

        $( ".eventPeriod" ).droppable({
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" );
                    return false;
            }
        });
});

Any idea?

Answer 1

You change the tolerance of your droppable. Like this:

     $( ".eventPeriod" ).droppable({
            tolerance: 'touch',
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( this )
                    .addClass( "ui-state-highlight" );
                    return false;
            }
        });