jquery drop не работает в первый раз?

Question

Я добрался до странной проблемы. Событие Drop не работает в первый раз, работает хорошо во второй раз.

мой код:

$(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') 





} 

скрипку: http://jsfiddle.net/GRDww/155/

Я сидел вокруг на этой ошибке на некоторое время.

Answer 1

Код, который делает желтые и зеленые коробки недоступными, находится внутри обработчика drop для серой коробки. Таким образом, изначально только серый ящик является целевой точкой.

Затем первая капля попадает на обработчик капли серых ящиков, и только тогда желтые и зеленые коробки становятся недоступными.

Если вы переместите его за пределы функции drop, он работает в первый раз:

$('#grey').droppable({ 
    drop: function (event, ui) { 
     /*...*/ 
    } 
}); // $('#grey') 

$('#yellow,#green').droppable({ 
    drop: function (event, ui) { 
     /*...*/ 
    } 
}); // $('#yellow,#green') 

Обновлено скрипку: http://jsfiddle.net/GRDww/156/