GridStack並沒有在頁面上正確定位元素，當它們碰到特定的y軸點時

當我加載保存的佈局時，如果佈局的高度大於$（'。grid- stack'）。attr（'data-gs-current-height'），y軸的元素在頁面的頂部位置處超過該加載。他們的y軸標籤在DOM中正確反映。GridStack並沒有在頁面上正確定位元素，當它們碰到特定的y軸點時

如果文檔的高度沒有改變，它會按預期工作。僅當新加載的小部件的組合高度高於加載的文檔時纔會發生這種情況。（'.grid-stack'）。attr（'data-gs-current-height'）的值和元素值的高度在加載小部件之前已經使用了，但是儘管data-gs-current-height確實顯示在DOM中加載小部件新值之前它已經更新，但它們仍然呈現相同的堆疊。

我用改變網格堆疊高度的代碼：

var changeGridStackHeight = function(gridStackHeight, docHeight, json){ 
     $('.grid-stack').attr("data-gs-current-height", gridStackHeight); 
     $('.grid-stack').css('height', docHeight); 
     loadUserTemplate(json); 
    };

和loadUserTemplate（JSON）是：

var loadUserTemplate = function(json){ 
     var firstArray = json[0]; 
     var parsed = (JSON.parse(firstArray)); 
     var gridStack = $('.grid-stack-item'); 
     var plength = parsed.length; 

     gridStack.each(function(index){ 
      var count = 0; 
      var gridstackId = $(this).attr('data-custom-id'); 
      for(var i=0; i < plength; i++){ 
       if($(this).attr('data-custom-id') === parsed[i].id){ 
        $(this).attr('data-gs-x', parsed[i].x); 
        $(this).attr('data-gs-y', parsed[i].y); 
        $(this).attr('data-gs-width', parsed[i].width); 
        $(this).attr('data-gs-height', parsed[i].height); 
       } 
       var equals = Number(parsed[i].id) == Number(gridstackId); 
       if(equals === true){ 
        count++; 
       } 
      } 
      if(count === 0){ 
       $(this).css('display', 'none'); 
      } 
     }); 
     var reposition = window.setTimeout(function(){ 
      fixSizes(); 
     },1000); 
    };

來源

2016-09-19 Mike

我找到了一種方法來解決我特別的問題，雖然我不假設這是它被修正的方式，因爲它確實有與之相關的其他問題。如果將來任何人有更適合的方式，請發佈它，我會將其答案標記爲正確的方式。

我發現gridstack正在創建它自己的樣式表，它將_max設置爲：我的網格添加的任何高度。它遍歷每個小部件並落在最終高度上。 gridstack.js中有一行更新maxHeight。我把「105」加到它的末尾，因爲這個數字和我需要的一樣大，以適合我的特殊情況。這行代碼看起來像現在這樣：

self._updateStyles(maxHeight + 105);

它產生的問題是，當用戶試圖改變這種加載一個網格，它把所有的小部件在板上。我可能會這樣做，所以小部件無法調整大小或從保存的模板中移出，但這又不是插件的正確功能。

來源

2016-09-20 16:48:06 Mike

GridStack並沒有在頁面上正確定位元素，當它們碰到特定的y軸點時

回答

相關問題