如何解决Gridstack-如果我在重新初始化之前破坏了网格,则稍后会失败
代码
注意:此处发布的所有功能都在同一文件interface.js
中。
我添加了一个事件侦听器,该事件侦听器在每次窗口调整大小时执行:
window.addEventListener("resize",function(_resize){
_window_resize_handler(_resize);
}
);
事件resize
发生时,处理器函数_window_resize_handler()
确定窗口是否足够宽,确定(a),是否确定(b)在移动/台式机上。基于此,它调用两个Gridstack.js初始化函数之一((一个用于桌面,一个用于移动):
function _window_resize_handler(_resize){
// Screen properties
let _dpi = window.devicePixelRatio;
let _sw = screen.width;
let _sh = screen.height;
let _ss = _sw + _sh;
let _ar;
let _sww;
// Window properties
let _ww = window.innerWidth;
// We calculate the aspect ratio in landscape format - this is the only one we need.
if (_sw > _sh){
_ar = _sw / _sh;
}
else{
_ar = _sh / _sw;
}
// We set the longer dimension of the two to be screen width.
if (_sw > _sh){
_sww = _sw;
}
else{
_sww = _sh;
}
// If window width is too narrow we use Gridstack's one-column mode regardless of the device.
// Otherwise we let screen properties decide.
if (_ww < 768){
_gridstack_init_mobile();
}
else if( ((_ar < 1.78) && (_dpi < 2.5 ) && (_sww > 768)) || (_ss > 2000)){
_gridstack_init_desktop();
}
else{
_gridstack_init_mobile();
}
}
Gridstack.js初始化函数如下:
对于台式机:
function _gridstack_init_desktop(){
// Create global object "grid" with window.
window.grid = GridStack.init({
acceptWidgets: false,alwaysShowResizeHandle: true,animate: false,auto: true,// cellHeight: "15.45rem",// column: 12,disableDrag: false,disableOneColumnMode: true,disableResize: false,draggable: true,dragOut: false,float: true,handle: '.grid-stack-item-content',handleClass: 'grid-stack-item-content',itemClass: 'grid-stack-item',maxRow: 6,minRow: 6,minWidth: 768,oneColumnDomSort: false,placeholderClass: 'grid-stack-placeholder',placeholderText: '',resizable: {
autoHide: false,handles: 'n,nw,w,sw,s,se,e,ne'
},removeable: false,removeTimeout: 2000,//row: 6,rtl: false,staticGrid: false,});
grid.column(12);
grid.cellHeight("15.45rem");
}
对于移动设备:
function _gridstack_init_mobile(){
// Create global object "grid" with window.
window.grid = GridStack.init({
acceptWidgets: false,disableOneColumnMode: false,maxRow: 72,resizable: {
autoHide: false,verticalMargin: "0",});
grid.column(1);
grid.cellHeight("47.15vh");
}
结果
此部分有效,但仅当我在Chrome开发人员工具内部对所有触发_gridstack_init_mobile()
的屏幕进行调整时才有效。这些主要是手机屏幕:
当我选择触发_gridstack_init_desktop()
的iPad屏幕在初始化期间出了问题,我得到了1列而不是12列(左图)。但是,如果刷新,一切正常,我会得到12列(右侧图片):
我的设定
我的猜测是,我需要销毁grid
对象(如果存在),然后再将其重新初始化为Gridstack对象。这就是为什么我试图将这部分代码放在_gridstack_init_mobile()
和_gridstack_init_mobile()
的顶部:
if (document.getElementsByClassName('grid-stack').length != 0){
grid.destroy();
}
interface.js:372 Uncaught ReferenceError: grid is not defined
at _gridstack_init_desktop (interface.js:372)
at _window_resize_handler (interface.js:359)
at interface.js:8
有人知道吗?
解决方法
如果只需要更改列号,为什么还要销毁? (有一个API)。 removeAll(removeDOM = true)
会删除网格堆栈信息。
即使没有api grid.opts.maxRow=72
,您也可以更改任何属性,如果在下一个动作发生之前需要执行更改,则根本不会执行任何代码来更改。
如果库中存在错误,则应创建一个最小的可重现案例并将其发布为错误,而不是期望有人阅读您的堆栈溢出Q ...同样,您也无法说出您正在使用什么版本。尝试2.0.0,乍一看您正在使用12列,但网格最初显示为1列-您也不能多次初始化同一网格,但是可以设置column(1) ,删除dom元素会破坏所有内容,甚至不显示dom的开头。另外,不要使用世界上所有的选项进行初始化,只有非默认选项(否则很难阅读)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。