GridStackは特定のy軸ポイントにヒットした後にページ上に要素を適切に配置していません

Question

保存されたレイアウトを読み込んでいるときに、レイアウトの高さが$（ '。grid- stack '）。attr（' data-gs-current-height '）、ページの最上部にある負荷を超えるy軸を持つ要素。それらのy軸のラベルは、DOMに正しく反映されます。

文書の高さが変更されない場合、意図したとおりに機能します。これは、新しくロードされたウィジェットの高さが、ロードされているドキュメントよりも大きい場合にのみ発生します。

ウィジェットをロードする前に、（ '.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); 
    }; 

Answer 1

私は「私はドンが私の特定の問題を解決する方法を見つけましたそれがそれに関連する追加の問題を持っているので、これが修正されることを意図した方法であると仮定してはいけません。将来的に誰かがより適した方法を持っていれば、それを投稿してください。私はあなたの答えをそれが動作する場合の正しい方法としてマークします。

私はgridstackがそれ自身のスタイルシートを作成していることを発見しました。これは、_maxを設定します。グリッドが追加する高さまでです。各ウィジェットを繰り返し、最終的な高さに落ち着きます。 maxHeightを更新する行がgridstack.jsにあります。私はそれが私の特定のケースのために必要な大きさであるので、それの最後に "105"を追加しました。コード行は次のようになります。

self._updateStyles(maxHeight + 105); 

それが作成する問題は、ユーザーがロードされたグリッドを変更しようとしたとき、それはすべてのボード上のウィジェットを置くことです。ウィジェットが保存されたテンプレートからサイズ変更または移動できないようにすることはできますが、それはプラグインの正しい機能ではありません。