jQuery droppable - Trigger drop for given element at given position

How would you dynamically create a div and drop it in droppable div ?

This is the actual code.

   <head>
   <meta charset="utf-8">
   <title>jQuery UI Droppable - Default functionality</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css">
   <style>
      #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
      #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
   </style>
   <script>
      $(function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
          .html( "Dropped!" );
        }
      });
      });
   </script>
</head>
<body>
   <div id="draggable" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
   <div id="droppable" class="ui-widget-header">
      <p>Drop here</p>
   </div>
</body>

Now I'm creating a new element

$("body").append("<div id='custom_1'></div>")
$("#custom_1").draggable()

How to drop #custom_1 into #droppable at a given position programmatically ?

I have tried something like this but no luck

$("#droppable").trigger('drop',$('custom_1'))

Note:

I want to trigger the event(so I can get their params event and ui) not asking this to just execute codes in drop event.

Solution

Without rewrite the event chain you can use jQuery.simulate plugin. It is used from jQuery UI development team for jQuery UI unit testing.

Code:

$(function () {
    $("#draggable").draggable();
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });

    $("body").append("<div id='custom_1' class='ui-widget-content'>demo</div>");
    $("#custom_1").draggable();
    var destination = $('#droppable').offset();

    $("#custom_1").simulate("drag", {
        dx: -destination.left + 50, // move to this x
        dy: -destination.top + 20, // move to this y
        speed: 5000 // set speed
    });
});

Demo: http://jsfiddle.net/IrvinDominin/ALcC4/