Javascript 封隔器未初始化-无法调用方法，即$（）。封隔器（“BindDragableyEvents”）

我试图结合派克和德拉加比利的图像上传功能。我在同一个函数中初始化这两个函数，但得到一个错误，即Packer尚未初始化。我试着将代码分成两个函数，一个用于处理图像上传和dragabilly。另一个是对付派克，但我还是遇到了同样的问题。目前，图像正在被拉入并可拖动，但Packey尚未初始化。感谢您的帮助

JS

功能手柄文件选择（evt）{
var files=evt.target.files；
//循环浏览文件列表并将图像文件渲染为缩略图。
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；//仅接受图像文件
}
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（uploadedFile）{
返回函数（e）{
变量$container=$（“.packery”）
var div=document.createElement（'div'）；
div.className=“col-3图像项”；
div.innerHTML=[''）.join（''）；
document.getElementById（'packery'）.insertBefore（div，null）；
var draggie=新的可拖动（div{
句柄：'.handle'
});
$container.packery（'BindDragAbililyEvents'，draggie）；
};
})（f） )；
//作为数据URL读入图像文件。
reader.readAsDataURL（f）；
}//for循环结束
}//handlefileselect结束
$（“#文件”）.change（handleFileSelect）；

HTML

---

未在您提供的代码中初始化Packer。有关如何初始化的信息，请参阅

以下行不初始化封隔器

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

我建议在最后一行之前添加这一行代码（其中指定了on change事件处理程序）：

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

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

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