Restrict Draggable To be Dropped Only if it is Completely Inside the Droppable?

Question

Take a look at this demo and let me know how I can force jQuery UI to Drop the draggable inside Droppable ONLY if the draggable is Completely inside the droppable?

$(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .find( "p" )
                        .html( "Dropped!" );
            }
        });
    });

Answer 1

Use the tolerance option to fit. Change your script to

$( "#droppable" ).droppable({tolerance: "fit", drop: function( event, ui ) {
    $( this ).find( "p" ).html( "Dropped!" );
    }