title: Scale/Animate jQuery Draggable when dropped into droppable
body: <p>I have a series of draggable images and some droppable folders. I'm looked around the web and can't find any plugins/code on a way to create a effect inwhich when a draggable is dropped onto a droppable, it scales downwards into the droppable area and fades out.</p>
  
  <p>Basically, something similar to when you drag an icon into a folder in OSX. I'm trying to give the user the visual feedback that the image has been added to a folder.</p>
  
  <p>I should add that I do not want to remove/move the draggable from the screen. I am using 'clone' to provide the visual feedback that the dragging is taking place.</p>
  
  <p>Any suggestions/code/ideas?</p>
  
  <p>UPDATE</p>
  
  <p>Worked a little bit more while looking at clone() in jquery. I have come up with the following, however the position of the clone seems to be quite random. Ideally, I would like the clone to be positioned over the droppable when performing the animation.</p>
  
  <pre><code>$('#photoscontainer').append($(r.photos[i].thumbnailhtml).draggable({
                                  helper:"clone",
                                  stop: function(event,ui){
  
                                      clone = ui.helper.clone();
                                      $(this).append(clone.addClass('inside-drop-zone').draggable({
                                              containment: '.drop-zone'
                                      }));
                                      clone.animate({
                                          opacity: 0,
                                          width: "0",
                                          height: "0"
                                      });
                                  }
  
  
                              })
                          );
  </code></pre>