パッカーが初期化されていません - メソッドを呼び出すことができません、つまり$（）。packery（ "bindDraggabillyEvents"）

Question

画像アップロード機能でpackeryとdragabillyを組み合わせようとしています。私は同じ関数で両方を初期化していますが、packeryが初期化されていないというエラーを受け取ります。私は、コードを2つの関数に分割しようとしました.1つは画像のアップロードとドラッグ可能な処理を扱う関数です。パリーリーを扱うもう一つの人は、私はまだ同じ問題を抱えています。今すぐ画像が取り込まれ、ドラッグ可能ですが、パックは初期化されていません。どんな助けもありがとう！

JS

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); 

Packeryはあなたが提供したコードで初期化されていないHTML

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

Answer 1

。初期化の方法については、http://packery.metafizzy.co/#getting-startedを参照してください。

次の行は、パッカーを初期化しません！

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

私は（変更のイベントハンドラが割り当てられている）最後の行の前にコード行を追加することをお勧め：

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