jQuery single draggable in droppable

jQuery UI is a library that works with jQuery which allows you to easily drag and drop elements.

However, sometimes when you have more draggables and wish to let only one reside inside a droppable, you may need to take actions.

Here is some self explaining code that does just that:

$('.item').draggable({
  opacity: 0.35,
  revert: true,
  snap: true,
  zIndex: 2800
});

$('.box').droppable({
  greedy: true,
  drop: function(e, ui) {
    $(this).droppable('option', 'accept', ui.draggable);
    $(this).append(ui.draggable);
  },
  out: function(e, ui) {
    $(this).droppable('option', 'accept', '.item');
  }
});