title: Triggering a drop event with jQuery droppables
body: <p>Variations of this question have been asked, but the answers are all different, somewhat dated, and aren't working for me so I'm hoping it's a matter of changed syntax rules in jQuery that I'm missing. </p>
  
  <p>The scenario HTML:</p>
  
  <pre><code>&lt;div id="theDroppable"&gt;Droppable&lt;/div&gt;
  &lt;div id="theDraggable"&gt;Draggable&lt;/div&gt;
  &lt;div id="theTrigger"&gt;Click to trigger a drop&lt;/div&gt;
  </code></pre>
  
  <p>The jQuery:</p>
  
  <pre><code>$( "#theDroppable" )
      .droppable({
        drop: function( event, ui ) {
            alert('dropped');
        }
      });
  
  $( "#theDraggable" ).draggable({});
  
  $( "#theTrigger" ).click(function(){$( "#theDroppable" ).trigger('drop')});
  </code></pre>
  
  <p>The fiddle: <a href="http://jsfiddle.net/7Bewj/" rel="nofollow">http://jsfiddle.net/7Bewj/</a></p>
  
  <p>The above creates a Droppable, a Draggable, and a div that I'd like to use to somehow trigger the function associated with the drop event on the droppable.</p>
  
  <p>The draggable works fine, dragging it to the droppable and releasing triggers the alert.</p>
  
  <p>The question is how can I trigger that same process without using an actual draggable...or at least without using a draggable that is dropped on top (such as by clicking the 3rd div)? </p>