How can I drop an image to a container and then update the container based on what was dropped to it?

Question

I'd like to be able to drag an image into one of two containers (container 1 and container 2). From there, depending on which container the image was dropped to, I'd like to update that container with a database call (or just update a row in one of my tables).

I'd like to use http://jqueryui.com/demos/droppable/ to achieve this, but I'm not sure how to process the request, and how to get each container to listen for an event handler (dropping of the image).

I've drawn a really bad diagram below to explain what I mean:

Answer 1

The droppable demo shows exactly how to do this sort of thing.

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});

My own really basic demo → (updated)