JQuery first frame not working

Question

Why does this jQuery not drop out on first reset?

$(".drag").draggable({
  revert: 'invalid',
  drag: function(event, ui) {
    $(this).addClass('valid');
  }
});
$("#droppable").droppable({
  accept: '.valid',
  drop: function(event, ui) {
    $('#droppable').text('dropped');
  }
});

Please see jsfiddle , which shows that the first time each green square inside red is hit , it will be returned.

Answer 1

droppable only accepts valid div classes, and at the beginning of your drag, your grenn div does not have this class. The drag function adds it, but it's too late for the first drop, but it's still there, so subsequent dragdrops work.

Solution: make sure the green div has .valid before the first drag event

Answer 2

, drop "valid" , droppable drop. , , "valid" .