¿Cómo puedo colocar una imagen en un contenedor y luego actualizar el contenedor según lo que se le cayó?

Question

Me gustaría poder arrastrar una imagen a uno de los dos contenedores (contenedor 1 y contenedor 2). A partir de ahí, dependiendo de en qué contenedor se colocó la imagen, me gustaría actualizar ese contenedor con una llamada a la base de datos (o simplemente actualizar una fila en una de mis tablas).

Me gustaría utilizar http://jqueryui.com/demos/droppable/ para lograr esto, pero no estoy seguro de cómo procesar la solicitud, y cómo hacer que cada contenedor escuche a un controlador de eventos (caída de la imagen).

He dibujado una muy mala siguiente diagrama para explicar lo que quiero decir:

Answer 1

El droppable demo muestra exactamente cómo hacer este tipo de cosas.

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

My own really basic demo → (actualizan)