JQuery UI Draggable & Droppable “Revert” and “Out” conflict

问题

I am trying to make it so that multiple items that are draggable can only be dragged to 1 droppable. If dropped outside of a droppable then revert. Most of my code works except for one bug:

User drags the item into the droppable. Then drags out (executes out function) then he fails to drop in a droppable (revert happens, drag goes back to its previous droppable). What has effectively happened is the droppable can now accept any drag (since the drag left, executing out) while the drag never actually left due to revert.

I have been trying to resolve this for several of hours and have gone through the API. I even tried to have a callback function for revert however due to confusion on how to retrieve the draggable's droppable, I am stuck.

 //revert if not dragged to a draggable.
 $( "[id|=drag]" ).draggable({ revert: 'invalid', revertDuration: 350 }); 

$( ".dropZone" ).droppable({

    drop: function(ev,ui) {
      $(this).droppable('option', 'accept', ui.draggable); //only accept the current drag.
    },
    out: function(ev, ui) {
      $(this).droppable('option', 'accept', '[id|=drag]');//now you can accept any drag.
     }
});

jsFiddle: http://jsfiddle.net/tG6cj/

来源：https://stackoverflow.com/questions/18327928/jquery-ui-draggable-droppable-revert-and-out-conflict