包裝未初始化 - 無法調用方法，即$（）。packery（「bindDraggabillyEvents」）

我想在圖像上傳功能上結合打包和dragabilly。我正在使用相同的函數初始化它們兩個，但得到packery未初始化的錯誤。我試圖將我的代碼分成兩個函數，一個用於處理圖像上傳和dragabilly。另一個處理打包，但我仍然遇到同樣的問題。現在圖像被拖入，並可拖動，但打包沒有得到初始化。任何幫助表示讚賞！

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 
    if (!f.type.match('image.*')) { 
     continue; // only accept image files 
    } 

    var reader = new FileReader(); 
    // Closure to capture the file information. 
    reader.onload = (function(uploadedFile) { 
     return function(e) { 
     var $container = $(".packery") 
     var div = document.createElement('div'); 

     div.className = "col-3 image-item"; 
     div.innerHTML = ['<div class="handle"></div><img class="thumb" src="', e.target.result, 
           '" title="', escape(uploadedFile.name), '"/>'].join(''); 
     document.getElementById('packery').insertBefore(div, null); 
     var draggie = new Draggabilly (div, { 
      handle: '.handle' 
     }); 

     $container.packery('bindDraggabillyEvents', draggie); 
    }; 
    })(f); 

    // Read in the image file as a data URL. 
    reader.readAsDataURL(f); 
    } // end of for loop 
} // handlefileselect end 

$('#files').change(handleFileSelect);

HTML

<input id="files" multiple="true" name="files[]" type="file" /> 
<div class="packery" id="packery"></div>

來源

2016-05-02 luke

Packery未在您提供的代碼初始化。有關如何初始化的信息，請參見http://packery.metafizzy.co/#getting-started。

以下行不會初始化打包！

$container.packery('bindDraggabillyEvents', draggie);

我建議加入這行代碼的最後一行（其中上改變事件處理程序分配）之前：

$('.packery').packery();

來源

2016-05-02 14:38:46

包裝未初始化 - 無法調用方法，即$（）。packery（「bindDraggabillyEvents」）

回答

相關問題