Packery 未初始化 - 无法调用方法,即 $().packery("bindDraggabillyEvents")
Packery not initialized - Cannot call methods, i.e. $().packery("bindDraggabillyEvents")
我正在尝试在图片上传功能上结合 packery 和 dragabilly。我在同一个函数中初始化它们,但得到了 packery 没有初始化的错误。我尝试将我的代码分成两个函数,一个用于处理图像上传和拖动。另一个处理包装,但我仍然遇到同样的问题。现在图像被拉入并且可以拖动,但 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>
Packery 未在您提供的代码中进行初始化。有关如何初始化的信息,请参阅 http://packery.metafizzy.co/#getting-started。
下面这行没有初始化Packery!
$container.packery('bindDraggabillyEvents', draggie);
我建议在最后一行之前添加这行代码(分配 on change 事件处理程序的地方):
$('.packery').packery();
我正在尝试在图片上传功能上结合 packery 和 dragabilly。我在同一个函数中初始化它们,但得到了 packery 没有初始化的错误。我尝试将我的代码分成两个函数,一个用于处理图像上传和拖动。另一个处理包装,但我仍然遇到同样的问题。现在图像被拉入并且可以拖动,但 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>
Packery 未在您提供的代码中进行初始化。有关如何初始化的信息,请参阅 http://packery.metafizzy.co/#getting-started。
下面这行没有初始化Packery!
$container.packery('bindDraggabillyEvents', draggie);
我建议在最后一行之前添加这行代码(分配 on change 事件处理程序的地方):
$('.packery').packery();