JQuery draggable dynamic with document.createElement

Question

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".

   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('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
              f.size, ' bytes, last modified: ',
              f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
              '</li>');


    LoadImage.getBinary64DataFromFile(f);
}
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

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

}

};

Answer 1

The variable div is just a DOM element. To call jQuery methods on it you need to wrap it in a jQuery wrapper. The following line:

div.draggable();

Should be:

$(div).draggable();