$(function() { $( "#draggable" ).draggable({ revert: "valid" }); $( "#draggable2" ).draggable({ revert: "invalid" }); $( "#droppable" ).droppable({ activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); });

I revert when I'm dropped

I revert when I'm not dropped

Drop me here

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option set on the draggable.