title: jquery drop not working on first time?
body: <p>i am kind facing the weird issue. Drop event not working in first time, works good on second time.</p>
  
  <p>my code:</p>
  
  <pre><code>$( document).ready( init());
  
  function init() {
      $blueClone = null;
      var inYellow = false;
  
      $('.dragme').draggable({
          helper: "clone",
          cursor: 'move',
  //        revert: true    // causes the dropped blue to zip back to it's source - whether dropped into the yellow or not
      });
  
      $('#grey').droppable({   
  
          // for any blue that gets dropped in grey
          drop: function (event, ui) {
              if( ui.draggable.hasClass( 'canvas-element')) { 
                  $blueClone = ui.draggable;
                  $blueClone.remove();
              } else {
                  $blueClone = ui.draggable.clone();    // create a new blue 
              }
  
  
  
              $('#yellow,#green').droppable( {    // for any blue that gets dropped in yellow        
                  drop: function (event, ui) {
                      var $canvas = $(this);
                      if( !ui.draggable.hasClass('canvas-element')) {    // if the blue that has just been dropped was not already in yellow
                          $blueClone.addClass('canvas-element');
                          $blueClone.draggable({
  //                            containment: '#yellow'    // ensures that once blue is in yellow, it remains contained in yellow
                          });
                          $canvas.append($blueClone);    // attach the new blue created above onto yellow
                          $blueClone.css({
                              left: (ui.position.left),
                              top: (ui.position.top),
                              position: 'absolute'
                          });
                      }    // if( !ui.draggable.hasClass('canvas-element'))
                  }    // drop: function (event, ui)
              });    // $('#yellow').droppable(
  
          }    // drop
      });    // $( '#grey')
  
  
  
  
  
  }
  </code></pre>
  
  <p>fiddle:<a href="http://jsfiddle.net/GRDww/155/" rel="nofollow">http://jsfiddle.net/GRDww/155/</a></p>
  
  <p>I have been sitting around on this bug for a while.</p>