jQuery открыть модальный при сбросе

#jquery #drag-and-drop

#jquery #перетаскивание

Вопрос:

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

 $("#таблица #еда li.corn" ).перетаскиваемый({
 отменить: "недопустимо", 
 Класс на воздушной подушке: "пользовательский интерфейс-состояние-активно", 
 выпадение: функция (событие, пользовательский интерфейс) {
 $( "#cornDialog").dialog( "открыть");
 возвращает false; 
 }
 });
 $( "#plate ul").сбрасывается({ 
 Класс на воздушной подушке: "пользовательский интерфейс-состояние-активно", 
 выпадение: функция (событие, пользовательский интерфейс) {
 $(this).addClass( "ui-state-highlight"); 
 }
 });
 $( "#cornDialog").dialog({ 
 Автозапуск: false, 
 показать: "слепой", 
 скрыть: "медленно"
 });

Ответ №1:

Попробуйте перейти $( "#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;       
        }
});

1. однако вот в чем проблема: у меня есть ряд других перетаскиваемых элементов, каждый из которых должен иметь свое собственное диалоговое окно при удалении. Следовало бы упомянуть об этом!

2. Я тоже думал об этом, но это могло бы обмануть, даже если бы кто-то отпустил перетаскивание из определенной области перетаскивания. Мне нужно, чтобы модал всплывал, как только он фактически будет удален в «удаляемую» область

3. В функции перетаскивания droppable вы можете посмотреть на ui.draggable и решить, какое диалоговое окно показывать на основе этого. Может быть, на основе имени класса?

4. ммм …. Думаю, я понял. Нужен быстрый пример? Вы имеете в виду оператор like и ‘if’?

5. ДА. if (ui.draggable.hasClass('someClass')) { //show dialog }

Ответ №2:

Вы хотите поместить свой диалоговый код в сбрасываемый обратный вызов 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"
        }); 
    }
});