JQuery UI droppables - image change that fell

Question

I am working with jQuery UI droppables , and I wonder what better way to make a dropped clone use a different IMG SRCthing than the drop item.

In the demo version of the photo editor, the thumbnail falls into a slot of the same size. I would like to put a large image in a small slot, and therefore I need its clone to use its thumbnail instead of the full image.

Any suggestions on the best way to handle this?

Answer 1

The droppable API accepts a drop callback in its parameters. Use it to change the src image, for example:

  $('#dropContainer').droppable({
       drop: function(e,ui) {
            $(ui.draggable).attr('src','/path/to/different/image');
       }
  });