Droppable

Code

$(".draggable-item").draggable({ revert: "invalid" });

$("#dropzone").droppable({
  accept: ".draggable-item",
  hoverClass: "drop-hover",
  activeClass: "drop-active",
  tolerance: "fit",
  drop: function(event, ui) {
    $(this).addClass("dropped").find("p").html("Dropped!");
    ui.draggable.css("background", "green");
  },
  over: function(event, ui) {
    $(this).addClass("over");
  },
  out: function(event, ui) {
    $(this).removeClass("over").removeClass("dropped");
  }
});

// Tolerance values: 'fit' (fully inside), 'intersect' (50% overlap),
// 'pointer' (mouse over), 'touch' (any overlap)

Explanation

Pairs with draggable to build drop interactions; the accept selector restricts which draggables are valid. The tolerance option controls how much overlap is required to trigger the over/out/drop events. The hoverClass and activeClass make it easy to style state changes during interaction.

More jQuery UI Snippets