未初始化的Packery -无法调用方法，即$().packery("bindDraggabillyEvents")

Question

我试图结合包装和拖拽的图像上传功能。我在相同的函数中初始化它们，但是得到了packery没有初始化的错误。我尝试将我的代码分成两个功能，一个是处理图像上传和拖拽性。另一个要处理包装，但我还是有同样的问题。现在，图像被拉进来并且是可拖动的，但是包没有被初始化。任何帮助都是非常感谢的！

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。有关如何初始化的信息，请参见http://packery.metafizzy.co/#getting-started。

下面的行不初始化包装！

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

我建议在最后一行之前添加这一行代码(其中指定了处理程序)：

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