title: jQuery UI drop event of droppable fires on sortable
body: <p>I have a list of elements that can be dropped into a list of (existing) sortables.
  When a droppable element is dropped into the sortables, I want to modify the element. I do this by calling the drop event of droppable.</p>
  
  <p>But it seems this drop event is also fired when the sortable elements are sorted inside sortable. And I only want to modify the dropped element when dropped-in from the outside.</p>
  
  <pre><code>$('#sortable').sortable().droppable({
  // Drop should only fire when a draggable element is dropped into the sortables,
  // and NOT when the sortables themselves are sorted (without something being dragged into).
  drop: function(ev, ui){
      $(ui.draggable).html('&lt;div&gt;TEMPLATE&lt;/div&gt;');
  }
  });
  $('#draggables li').draggable({
      connectToSortable: '#sortable',
      helper: 'clone',
      revert: 'invalid',
      cursor: 'move'
  });​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/CxpMn/1/" rel="nofollow">Complete example on Fiddle</a>.</p>
  
  <p>How can I modify a dropped-in element without modifying them when sorted inside of sortable?</p>