如何在jQuery UI中的Droppable中拖放后停止可拖动？

Question

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

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>

Answer 1

Use the disable method like in:

$( "#droppable-1" ).droppable({
   drop: function( event, ui ) {
      $( this ).addClass( "ui-state-highlight").disable();
   }
});

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

 .droppable{ width: 70px; height: 30px; padding: 5px; } 

 <link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <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>