Packery nicht initialisiert - Methoden können nicht aufgerufen werden, d. H. $(). Papery ("bindDraggabillyEvents")

Question

Ich versuche Packery und Dragabilly mit einer Image-Upload-Funktion zu kombinieren. Ich initialisiere beide in derselben Funktion, bekomme aber den Fehler, dass die Packung nicht initialisiert wurde. Ich habe versucht, meinen Code in zwei Funktionen aufzuteilen, eine für den Upload und Dragabilly. Der andere, um die Verpackung zu behandeln, aber ich bekomme immer noch das gleiche Problem. Gerade jetzt werden die Bilder eingezogen und sind ziehbar, aber die Packung wird nicht initialisiert. Jede Hilfe wird geschätzt!

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

HTML

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

Answer 1

Packery wird Ihnen zur Verfügung gestellt haben im Code nicht initialisiert werden. Informationen zur Initialisierung finden Sie unter http://packery.metafizzy.co/#getting-started.

Die folgende Zeile initialisiert die Verpackung nicht!

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

Ich schlage vor, das Hinzufügen dieser Codezeile vor der letzten Zeile (wobei die auf Wechsel zugewiesen Event-Handler):

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