jQuery открыть модал на капле

Question

Я пытаюсь открыть модальное окно после удаления элемента.Я искал доски и не могу ничего найти.Вот что у меня пока, но это не работает.Элемент перетаскивается как следует, но модальное окно не открывается:

    $( "#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

Вы хотите поместить свой диалоговый код в обратный вызов drop-drop, вот так

   $( "#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 2

Попробуйте переместить $( "#cornDialog" ).dialog( "open" ); в функцию drop: переключаемого предмета.

Вот так:

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

РЕДАКТИРОВАТЬ: альтернативно, вы можете реализовать stop() на перетаскиваемом:

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