title: jQuery ui dialog boxes not draggable and resizable after appendTo?
body: <p>I am implementing sticky notes using jquery ui dialog boxes. On a button click a big full screen ui dialog box is opened and inside that big dialog box is a button to add small dialog boxes (notes).</p>
  
  <p><strong>HTML</strong>: </p>
  
  <pre><code>&lt;body&gt;
  
    &lt;button id="opener"&gt;open the dialog&lt;/button&gt;
  
    &lt;div id="outter-dialog" title="Notes"&gt;
      &lt;button id = "add-note"&gt;Add Note&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$( "#outter-dialog" ).dialog({
          autoOpen: false,
          title: "Success Message",
          width: $(window).width(),
          height: $(window).height(),
          modal: false,
      buttons: {
          Cancel: function() {
              $(this).dialog('close');
          }
      }
  });
  
  $("#opener").click(function(){
      $( "#outter-dialog" ).dialog('open');
  });
  
  
  var prevelement;
  $("#add-note").click(function () {
      var dynamicDialog = $('&lt;div id="MyDialog"&gt; &lt;textarea&gt;Hello&lt;/textarea&gt; &lt;/div&gt;');
      var pos;
      if (prevelement) {
          pos = {
              my: "left",
              at: "bottom",
              of: prevelement
          }
      }
  
      dynamicDialog.dialog({
          title: "Note",
          modal: false,
      appendTo: "#outter-dialog",
          buttons: [{
              text: "Save",
              click: function () {}
          }],
          position: pos
      });
      prevelement = dynamicDialog
  });
  </code></pre>
  
  <p>Now I have an issue when I add <code>appendTo: "#outter-dialog"</code> to my dynamic small dialog boxes (notes):</p>
  
  <p>after appending them to outter dialog box <strong>they are no longer resizable and draggable</strong>.</p>
  
  <p>I appended them to outter dilaog box so that on open/close of outter dialog box inner notes are shown/hidden.</p>
  
  <p>Any idea why they are not draggable and resizable??</p>