jQuery drag / drop - разные модалы для каждого «выпадающего» предмета?

Question

Только что получил ответ на другой мой вопрос (модал не открывался по капле). Теперь у меня есть новая проблема:

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

# cornDialog - модальный режим, который открывается при падении куска кукурузы. li.corn - это кусок кукурузы, который "перетаскивается", а # plate - это div, который "сбрасывается", но, как вы можете видеть, у него нет никакого способа узнать, какой элемент был перетащил / уронил, чтобы # cornDialog открывался для каждого элемента. Мне нужен способ открыть отдельный диалог для каждого куска еды (ножка индейки, яблоко и т. Д.). Имеет смысл?

Answer 1

Если вы добавите атрибут jQuery «cornid» к каждому перетаскиваемому li.corn, вы можете сделать что-то вроде этого:

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

Если вы публикуете информацию о том, как вы создаете свои "li.corn", я могу посоветовать, как добавить атрибут данных jQuery.