如何在jQuery UI中删除Droppable后停止拖拽？

Question

请你看一下This Demo，让我知道如何在Droppable中删除后停止拖动？

这是我的代码

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

这是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

使用禁用方法，如：

$( "#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>