前三张图是示例自带的,有三个横杠,拖拽横杠可以排序这三张图,第四张图是我另外拖拽进去的,如何能让拖拽进去的图也能排序
文字排序具体需求是什么呢
我也碰到了这个问题,希望能帮到你~
直接调用插件的destroy方法后,重新初始化插件,初始化时记得在最后调用enable方法,否则会造成第三次上传回调没有反应。
以下是我的部分源码:
//销毁对象
$(".file-input-overwrite").fileinput("destroy");
//初始化
initFileInputObj(newPreviewsArr, newConfigArr);
function initFileInputObj(previewsArr, configArr){
// Modal template
var modalTemplate = '
// Buttons inside zoom modal
var previewZoomButtonClasses = {
toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
fullscreen: 'btn btn-default btn-icon btn-xs',
borderless: 'btn btn-default btn-icon btn-xs',
close: 'btn btn-default btn-icon btn-xs'
};
// Icons inside zoom modal classes
var previewZoomButtonIcons = {
prev: '',
next: '',
toggleheader: '',
fullscreen: '',
borderless: '',
close: ''
};
// File actions
var fileActionSettings = {
zoomClass: 'btn btn-link btn-xs btn-icon',
zoomIcon: '',
dragClass: 'btn btn-link btn-xs btn-icon',
dragIcon: '',
removeClass: 'btn btn-link btn-icon btn-xs',
removeIcon: '',
indicatorNew: '',
indicatorSuccess: '',
indicatorError: '',
indicatorLoading: ''
};
$(".file-input-overwrite").fileinput({
uploadAsync: true,
showDrag: true,
dragIcon: '<i class="glyphicon glyphicon-menu-hamburger"></i>',
dragClass: 'text-info',
language: 'zh',
overwriteInitial: true,
browseLabel: 'Browse',
browseIcon: '<i class="icon-file-plus"></i>',
uploadIcon: '<i class="icon-file-upload2"></i>',
removeIcon: '<i class="icon-cross3"></i>',
layoutTemplates: {
icon: '<i class="icon-file-check"></i>',
modal: modalTemplate
},
initialPreview: previewsArr,
initialPreviewConfig: configArr,
initialPreviewAsData: true,
overwriteInitial: true,
previewZoomButtonClasses: previewZoomButtonClasses,
previewZoomButtonIcons: previewZoomButtonIcons,
fileActionSettings: fileActionSettings,
uploadUrl: "/admin/product/upload?from=file&dir=product&id=@model.getProductId()",
maxFileCount: 5
}).on('filesorted', function(e, params) {
console.log('File sorted params', params);
}).on("filebatchselected", function(event, files) {
picture_size = files.length;
console.log("picture_size:"+picture_size);
$(this).fileinput("upload");
}).on("fileuploaded", function(event, r, previewId, index) {
console.log(123);
var data = r.response;
console.log(data);
console.log(previewId);
console.log(index);
selectedImagesStr = selectedImagesStr + data.data.file_name + ",";
console.log(selectedImagesStr);
//若为最后一张上传的图片,重新初始化fileinput插件
picture_index++;
if(picture_index == picture_size
&& picture_index != 0
&& picture_size != 0){
console.log("开始重新渲染插件");
refreshFileinput();
picture_index = 0;
picture_size = 0;
selectedImagesStr = "";
}
}).fileinput("enable");//enable作用:destroy并重新初始化fileinput插件后,插件会处于disable状态
}
可以看看sortable.js