Can you please take a look at This Demo and let me know how I can Stop Dragging After Dropping in Dropable?

Here is the code I have

$(function() { $( ".draggable" ).draggable({cancel:false}); $( "#droppable-1" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ); } }); $( "#droppable-2" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ); } }); $( "#droppable-3" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ); } }); });

and here is the HTML

<button type="button" id="App-1" class="btn btn-default btn-xs draggable">App-1</button> <button type="button" id="App-2" class="btn btn-default btn-xs draggable">App-2</button> <button type="button" id="App-3" class="btn btn-default btn-xs draggable">App-3</button> <div id="droppable-1" class="droppable ui-widget-header"></div> <div id="droppable-2" class="droppable ui-widget-header"></div> <div id="droppable-3" class="droppable ui-widget-header"></div>