Overlapping grid windows, angular-gridster

grid-config.js

$scope.itemMapper = {
    sizeX: 'window.grid.size.x',
    sizeY: 'window.grid.size.y',
    row: 'window.grid.position.row',
    col: 'window.grid.position.col'
};

var emitResize = function($element) {
  dc.events.trigger( function() {
    $rootScope.$emit('gridster.resize', $element);
  }, 200 );
};

$scope.gridOptions = {
  pushing: true,
  floating: true,
  swapping: true,
  margins: [10, 10],
  outerMargin: true,
  draggable: {
    enabled: true,
    handle: '.handle'
  },
  defaultSizeX: EXPLORE_DEFAULT_SIZE_X, //3
  defaultSizeY: EXPLORE_DEFAULT_SIZE_Y, //3
  columns: 4 * 3,
  width: 'auto',
  colWidth: 'auto',
  rowHeight: 'match',
  // colWidth: 150,
  // rowHeight: '125',
  minSizeX: 2,
  maxSizeX: 8,
  minSizeY: 2,
  maxSizeY: 8,
  maxRows: 50,
  resizable: {
       enabled: true,
       handles: ['se'],
       start: function(event, $element, widget) { console.log("resize start"); },
       resize: function(event, $element, widget) { 
        // event.stopImmediatePropagation();
        emitResize($element); 
        },
       stop: function(event, $element, widget) { 
        // event.stopImmediatePropagation();
        emitResize($element);
      }
  }
};

overlapping-items.mp4