jQuery UI droppables - changing the image that's dropped

Question

I'm working with jQuery UI's droppables and am wondering what the best way to make the dropped clone use a different IMG SRC than the item being dropped.

In the photo manager demo there, the thumbnail gets dropped into a slot that's the same size. I'd like to drop a large image into a small slot, and as such I need its clone to use my 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 options. Use it to change the src of the image, something like:

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