Droppable

$(".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)