Блог

КОД

Примечание: Все функции, опубликованные здесь, находятся внутри одного файла interface.js .

Я добавил прослушиватель событий, который выполняется при каждом изменении размера окна:

 window.addEventListener("resize",
    function(_resize){
        _window_resize_handler(_resize);
    }
);
  

Когда resize происходит событие, функция обработчика, _window_resize_handler() которая определяет (а), достаточно ли широко окно, и (б), находимся ли мы на мобильном / настольном компьютере. На основе этого он вызывает один из двух 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) amp;amp; (_dpi < 2.5 ) amp;amp; (_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, 
        alwaysShowResizeHandle: true,
        animate: false,                               
        auto: true,                                  
        // cellHeight: "15.45rem",                   
        // column: 12,                              
        disableDrag: false,                         
        disableOneColumnMode: false,                
        disableResize: false,                      
        draggable: true,                            
        dragOut: false,                               
        float: true,                                  
        handle: '.grid-stack-item-content',          
        handleClass: 'grid-stack-item-content',       
        itemClass: 'grid-stack-item',                
        maxRow: 72,                                   
        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,     
        verticalMargin: "0",   
    });

    grid.column(1);
    grid.cellHeight("47.15vh");

}
  

РЕЗУЛЬТАТЫ

Это частично работает, но только если внутри инструментов Chrome dev я настраиваю между экранами, которые все запускают _gridstack_init_mobile() . В основном это экраны для мобильных телефонов:

Когда я выбираю, например, экран iPad, который запускает _gridstack_init_desktop() что-то идет не так во время инициализации, и я получаю 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 , у вас просто не будет никакого кода, выполняемого для изменения, если оно требуется, пока не произойдет следующее действие.

если в библиотеке есть ошибка, вы должны создать минимально воспроизводимый случай и опубликовать его как ошибку, а не ожидать, что кто-то прочитает ваш вопрос о переполнении стека … также вы не можете сказать, какую версию вы используете. Попробуйте 2.0.0, и с первого взгляда вы используете 12 столбцов, но сетка изначально выходит с 1 столбцом — также вы не можете инициализировать одну и ту же сетку несколько раз, но вы можете установить столбец (1), удаление элементов dom уничтожит все, и вы даже не покажете, с чего начинается ваш dom. Также не выполняйте инициализацию с параметрами в мире, только не по умолчанию (иначе трудно читать).