title: How do I make a JQuery Draggable with a smaller clone?
body: <p>I have a large element that is displayed on the screen that I would like to be able to drop on a smaller drop target. Therefore, I want to decrease the size of the draggable clone to match the size of the drop target. I thought it would look nice to animate this. I can't seem to get the smaller clone to center around the cursor while dragging though. Any ideas? Here is a what I tried:
  <a href="http://jsfiddle.net/a3Cj2/" rel="noreferrer">http://jsfiddle.net/a3Cj2/</a></p>
  
  <pre><code>$( ".draggable" ).draggable({
      helper: 'clone',
      start : function(event, ui){
          ui.helper.animate({
              width: 80,
              height: 50
          });
      }, 
      drag : function(event, ui){
          ui.helper.offset({
               left: event.pageX,
               top: event.pageY
          });
      }
  });
  
  $("#target").droppable({
      drop : function(event, ui) {
         console.log('dropped');     
      }
  });
  </code></pre>