title: Jquery-ui draggable and dynamic Jquery-ui draggable?
body: <p>This is my code taken from <a href="http://jqueryui.com/demos/draggable/" rel="noreferrer">http://jqueryui.com/demos/draggable/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;jQuery UI Draggable - Default functionality&lt;/title&gt;
    &lt;link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"&gt;
    &lt;script src="../../jquery-1.6.2.js"&gt;&lt;/script&gt;
    &lt;script src="../../ui/jquery.ui.core.js"&gt;&lt;/script&gt;
    &lt;script src="../../ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
    &lt;script src="../../ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;
    &lt;script src="../../ui/jquery.ui.draggable.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="../demos.css"&gt;
    &lt;style&gt;
    .draggable { width: 150px; height: 150px; padding: 0.5em; }
    &lt;/style&gt;
    &lt;script&gt;
     $(function() {
      $( ".draggable" ).draggable();
      $('.content').click(function(){
       var htmlData='&lt;div  class="draggable ui-widget-content      ui-draggable"&gt;&lt;p&gt;Drag me around&lt;/p&gt;&lt;/div&gt;';
       $('.demo').append(htmlData);
      });
     });
    &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="demo"&gt;
     &lt;div class="draggable ui-widget-content"&gt;
      &lt;p&gt;Drag me around&lt;/p&gt;
     &lt;/div&gt;
     &lt;div class="content"&gt;Test &lt;/div&gt;
    &lt;/div&gt;&lt;!-- End demo --&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Iam making draggable component dynamically as you can see in function iam using append. But newly generated drggable object is not dragging although i have given the jquery-ui generated classes.</p>