How to add a class to a div when a certain image is dropped onto it?

Question

So far I have it so if an image/section is dragged onto another div it will change the image of the div, but how can I have it so if a certain image/section with the class is dropped onto the div then it'll add a class to it and if another image/section is dropped onto it then another class is added?

So far I have this for the drag and drop:

        $(function() {
            $( "#draggable" ).draggable({
                drag: function(event, ui) {
                    $( this )
                        .addClass( "choppedonion" )
                        .find( "section" )
                            .html( "" );
                }
            });
            $( "#droppable" ).droppable({
                drop: function( event, ui ) {
                    $( this )
                        .addClass( "fullbowl" )
                        .find( "div" )
                            .html( "" );
                }
            });
        });

Answer 1

On the drop event you can reference the draggable element with ui.draggable. Then you can check if the element has the class you're looking for:

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
            .addClass( "fullbowl" )
            .find( "div" )
            .html( "" );

        var $draggable = $(ui.draggable);
        if( $draggable.hasClass('oneClass')) {
            $draggable.addClass('addedClass');
        }
        if( $draggable.hasClass('otherClass')) {
            $draggable.addClass('otherAddedClass');
        }
     }
});

Here's a quick demo.