Question

I’m trying to open a modal window after dropping an element. I’ve searched the boards and can’t find anything. Here’s what I have so far, but it’s not working. The item drags and drops as it should, but the modal doesn’t open:

    $( "#table #food li.corn" ).draggable({
            revert: "invalid",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
                $( "#cornDialog" ).dialog( "open" );
                        return false;       
            }
    });
    $( "#plate ul" ).droppable({
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $(this).addClass( "ui-state-highlight" );   
        }
    });
    $( "#cornDialog" ).dialog({
        autoOpen: false,
        show: "blind",
        hide: "slow"
    });

Answer 1

Try moving $( "#cornDialog" ).dialog( "open" ); into the drop: function of the droppable.

Like so:

$( "#plate ul" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $(this).addClass( "ui-state-highlight" );  
        $( "#cornDialog" ).dialog( "open" ); 
    }
});

EDIT: alternatively, you could implement stop() on the draggable:

$( "#table #food li.corn" ).draggable({
        revert: "invalid",
        hoverClass: "ui-state-active",
        stop: function( event, ui ) {
            $( "#cornDialog" ).dialog( "open" );
                    return false;       
        }
});