Question: I am using ***Gridster v0.7.0***, Recently I am facing one problem that while dragging the widgets the dragged widget gets overlapped on the widget that exists on that co-ordinates. 

Below I have attached the GIF for better understanding.

Gridster Overlapping GIF :   

1. [![https://i.imgur.com/QB31e2s.gif](https://i.stack.imgur.com/q1o2u.gif)](https://i.stack.imgur.com/q1o2u.gif)   

2. [![https://i.postimg.cc/KzT4m9Sh/grid.gif](https://i.stack.imgur.com/B6zDf.gif)](https://i.stack.imgur.com/B6zDf.gif)

Adding the code for creating 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');

```

Answer: 
try to make widgets with minimum configuration and option. You can refer the official site for a basic confing. Following is a basic option which i used to make gridster.

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

        };

```
You can add new grids by using the builtin option `gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);`

this will probably solve your overlap issue