CODEWITHSUNDEEP
jquerydrag-and-dropjquery-ui-draggablejquery-ui-droppable
jdarling
jdarling

Reputation: 13

jQuery drag/drop - different modal for each "dropped" item?

Just got my other question answered (modal wasn't opening on drop). Now I have a new problem:

    $( "#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 is the modal that will open when the piece of corn is dropped. li.corn is the piece of corn that's "draggable" and #plate is the div that's "droppable", but as you can see it has no way of knowing which element was being dragged/dropped so the #cornDialog would open for every item. I need a way to get a different dialog to open for each piece of food (turkey leg, apple, etc). Make sense?

Upvotes: 1

Views: 772

Answers (1)

Greg
Greg

Reputation: 8784

If you add a jQuery data attribute of "cornid" to each draggable li.corn you can do something like this:

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

If you post information about how you create your "li.corn"s I can advise about how to add the jQuery data attribute.

Upvotes: 0

Related Questions