JQuery可拖動的動態與document.createElement

Question

我想能夠動態創建div，並使該div可拖動使用JQuery。 如果我使用JQuery選擇器，則元素變爲可拖動。如果我創建了一個div，然後在div上調用draggable（），它不起作用。來自控制檯的錯誤狀態「布爾值不是函數」。

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

變量div只是一個DOM元素。要調用它的jQuery方法，你需要把它包裝在一個jQuery包裝器中。下面一行：

div.draggable(); 

應該是：

$(div).draggable();