title: Draggable element no longer draggable after drop using Jquery UI
body: <p>Below is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;jQuery UI Droppable - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
    &lt;style&gt;
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
    &lt;/style&gt;
    &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $( function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
    } );
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   
  &lt;div id="draggable" class="ui-widget-content"&gt;
    &lt;p&gt;Drag me to my target&lt;/p&gt;
  &lt;/div&gt;
   
  &lt;div id="droppable" class="ui-widget-header"&gt;
    &lt;p&gt;Drop here&lt;/p&gt;
  &lt;/div&gt;
   
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here it will drag and drop inside container.What i want to do is after drag and drop it can't be drag again from drop container.If anyone knows the solutions kindly help me to get of this issue.</p>