jQuery UI Drag and Drop with .trigger()

I'm trying to 'trigger' a drag and drop manually without the interaction of a mouse/user.

So far I have been able to setup the jQuery UI demo for drag and drop but unable to trigger the drag and drop using the trigger() method.

Can anyone help with setting this up?

My code so far is:

  $(function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-hi开发者_Go百科ghlight" )
        .find( "p" )
        .html( "Dropped!" );
      }
    });

    $('#draggable').trigger("drop", $('#droppable'));
  });

Thanks in advance!

To make things simpler. All I want to be able to do is call the 'drop' method from anywhere outside of the droppable() but I will always need to be able to specify the event and ui objects.

Why not to create a custom event trigered by the drop? So you can trigger it yourself:

$(function(){
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $(this).trigger("customEvent", ui);
        }
    });
    $( "#droppable" ).bind("customEvent", function(event, ui ){         
        $( this )
                .find( "p" )
                    .html( "Dropped!");
    });  
   $( "#droppable" ).trigger("customEvent", $( "#draggable" ));  
});

I think what you want is:

$('#droppable').trigger('drop', $('#draggable'));

But even then, I wonder if the draggable element will make its way to the droppable as what got dropped...