2

可以说我有一个正常运行的Gridster网格

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
  </ul>
</div>

现在我想让一个网格可以包含三个部分：页眉、正文和页脚。

例如

<div class="gridster">
  <ul>
    <!-- header begin -->
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- header end -->
    <!-- body begin -->
    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- body end -->
    <!-- footer begin -->
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
    <!-- footer end -->
  </ul>
</div>

我想要实现的是在一个 gridster 实例中拥有三个独立的网格部分。页眉和页脚都没有固定的行数。用户应该能够在页眉、正文和页脚之间拖动小部件，然后相应地增加页眉和页脚的高度。

我想避免为此使用多个 gridster 实例，因为网格的数据将被保存，并且正文甚至可以是 12 A4 页长，并且多个实例的执行时间和内存使用量要大得多。

有没有人对如何实现这一目标有任何可能的想法？

更新（29/04）：

在布局方面，我发现最好的解决方案是：

<div class="gridster">
  <ul class="gheader"></ul>
  <ul class="gbody"></ul>
  <ul class="gfooter"></ul>
</div>

有了这个，我可以在调用时拥有三个网格区域$(".gridster ul").gridster();。

当我静态加载了一些小部件时，我可以很好地移动它们，ul但是当我使用该功能动态添加一个小部件时，add_widget该小部件只添加到第一个ul（在这种情况下.gheader）并且在它们之间拖动仍然需要被弄清楚。

我当前初始化 gridster 的代码：

Formbuilder.initGrid = function(selector){
  $(selector).gridster({
    widget_margins: [0, 0],
    widget_base_dimensions: [this.baseWidth, this.baseHeight],
    max_cols: 10,
    min_rows: 10,
    max_size_x: 10,
    shift_larger_widgets_down: false,
    resize: {
      enabled: true,
      max_size: [10, 10]
    }
  });

  gridster = $(selector).gridster().data("gridster");

  return gridster;
}
4

0 回答 0