jQuery UI – Droppable only accept one draggable

OK found a nice solution for this, essentially on ‘drop’ I set the droppable to only accept the item which has been dragged into it.

When you ‘disable’, the ‘out’ event that you need to re-initialize isn’t available anymore, so instead I just switched the eligible items around.

Then it’s possible for me to use the OUT event to re-accept all draggable items and because nothing else is accepted the OUT won’t be triggered by other draggables:

$(".drop-zone").droppable({
    drop: function(event, ui) { 
        $(this).droppable('option', 'accept', ui.draggable);
    },
    out: function(event, ui){
        $(this).droppable('option', 'accept', '.drag-item');
        }   
    });
});