JQUERY Gridster 小部件重叠问题答案

【问题标题】：JQUERY Gridster Widgets Overlap IssueJQUERY Gridster 小部件重叠问题
【发布时间】：2019-04-25 01:26:07
【问题描述】：

我正在使用 Gridster v0.7.0，最近我遇到了一个问题，即在拖动小部件时，被拖动的小部件与该 co- 上存在的小部件重叠纵坐标。

下面我附上了GIF以便更好地理解。

Gridster 重叠 GIF：
1.
2.

添加用于创建 Gridster 的代码。

gridster = $("#GDashboard ul").gridster({
    namespace: '#GDashboard',
    widget_margins: [10, 10],
    widget_base_dimensions: [270, 126],
    max_cols: 4,
    extra_rows:15,
    avoid_overlapped_widgets: true,
    serialize_params: function ($w, wgd) {
        return {
            id: $w.attr('id'),
            col: wgd.col,
            row: wgd.row,
            size_x: wgd.size_x,
            size_y: wgd.size_y
        };
    }
}).data('gridster');

【问题讨论】：

标签： jquery gridster

【解决方案1】：

尝试以最少的配置和选项制作小部件。您可以参考官方网站进行基本配置。以下是我用来制作 gridster 的基本选项。

 this.options = {
          gridType: GridType.Fit,
          displayGrid: DisplayGrid.None,
          pushItems: true,
          draggable: {
            enabled: true
          },
          resizable: {
            enabled: true
          }

        };

【讨论】：

【解决方案2】：

您可以使用内置选项 gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1); 添加新网格

这可能会解决您的重叠问题

【讨论】：