jQuery UI第一次丢弃不起作用

Question

为什么这个jQuery第一次丢弃时不会掉线？

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

请参阅此jsfiddle，其中显示第一次时间将每个绿色方块放入其将要还原的红色方块内。

Answer 1

droppable只接受有效的类div，并且在你的拖动开始时你的grenn div没有这个类。拖动功能会添加它，但是对于第一次掉落来说太迟了，但它仍然存在，因此后续的拖拽会起作用。

解决方案：确保在第一次拖动事件发生之前绿色div有.valid

Answer 2

它不起作用，因为drop元素在droppable触发drop事件之后才会出现'valid'类。解决此问题的方法是将drag事件更改为drag元素中的start事件，因此在触发drop事件之前会将“valid”类添加到元素中。