Bug jQuery: trigger draggable 'TypeError: ui is undefined'
<p>I can't understand why I have this error: <strong>TypeError: ui is undefined</strong></p>

<p>Yet the code is very simple! <strong>demo code:</strong> <a href="http://jsfiddle.net/9sNEK/19/" rel="nofollow">http://jsfiddle.net/9sNEK/19/</a></p>

<p>The Final Goal is when I drag the green div it triggers the dragging of the red div</p>

<p><strong>JS</strong></p>

<pre><code>$('.div_green')
.draggable()
.bind('drag',function(event,ui){

    $('.div_red').trigger('drag');

    $('.log').html("drag green - left:" + ui.position.left);

});

$('.div_red')
    .draggable()
    .bind('drag', function(event,ui){

        $('.log2').html("drag_to_simulate - left:"+ ui.position.left);

    });
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="div_green"&gt;&lt;/div&gt;

&lt;div class="pdrag" id="pdrag1"&gt;
    &lt;div class="div_red"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="pdrag" id="pdrag2"&gt;
    &lt;div class="div_red"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="log" style="width:200px;height:20px;"&gt;&lt;/div&gt;
&lt;div class="log2" style="width:200px;height:20px;"&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.div_green, .pdrag, .div_red{
  position:absolute;
}
.div_green{
  width:40px;
  height:40px;
  top:170px;
  left:300px;
  background-color: green;
}
.pdrag{
  width:120px;
  height:120px;
  top:50px;
  left:90px;
  background-color: #F1F1F1;
}
#pdrag2{
  top:230px;
  width:150px;
}
.div_red{
  width:20px;
  height:20px;
  top:40px;
  left:50px;
  background-color:red;
}
#pdrag2 .div_red{
    left:75px
}
</code></pre>

<p>Thank you very much for your help.</p>
