title: JQuery draggable dynamic with document.createElement
body: <p>I want to be able to create div on the fly and make that div draggable using JQuery. 
  If I use the JQuery selector the element becomes draggable.  If I create a div and then call draggable() on the div it does not work. The error from the console states "boolean is not a function".  </p>
  
  <pre><code>   var LoadImage = {
  
  handleFileSelect: function(evt)
  {
       var files = evt.target.files; // FileList object
  
       // files is a FileList of File objects. List some properties.
       var output = [];
       for (var i = 0, f; f = files[i]; i++) {
       output.push('&lt;li&gt;&lt;strong&gt;', escape(f.name), '&lt;/strong&gt; (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '&lt;/li&gt;');
  
  
      LoadImage.getBinary64DataFromFile(f);
  }
      document.getElementById('list').innerHTML = '&lt;ul&gt;' + output.join('') + '&lt;/ul&gt;';
  
  },
  getBinary64DataFromFile: function(file)
  {
       var reader = new FileReader();
  
         reader.onload = function(e) {
         var dataURL = reader.result;
         //alert(dataURL);
         LoadImage.createImageFromBinary64(dataURL);
      }
  
         reader.readAsDataURL(file);
  
  },
  createImageFromBinary64: function(b64)
  {
      var image = new Image();
      image.src = b64;
      image.onload = function(){
  
         LoadImage.createCanvasForImage(image);
      };
  },
  createCanvasForImage: function(image)
  {
  
      var canvas = document.createElement("canvas");
      canvas.setAttribute("width", "200px");
      canvas.setAttribute("height", "200px");
      canvas.setAttribute("id","myCanvas");
      //canvas.width = 200;
      //canvas.length = 200;  
      var context = canvas.getContext('2d');
      context.drawImage(image,0,0, 200, 200);
  
      var div = document.createElement('div');
      div.setAttribute('id','draggable');
      div.setAttribute('class','ui-widget-content');
      div.appendChild(canvas);
      div.draggable();  // this is what I want to be able to do
      var content = document.getElementById('content');
      content.appendChild(div);
  
      //LoadImage.makeDraggable();  // this works
  
  },
  makeDraggable: function()
  {
  
     $( "#draggable" ).draggable();
  
  }
  
  };
  </code></pre>