Как настроить angular-gridster.js, чтобы избежать наложения изображений и их ресайза

Как настроить angular-gridster, чтобы убрать Z-слои и наложение изображений дру
на друга? Сейчас, если изображения большие, они накладываются друг на друга.

Настройки, видимо, находятся в $scope.gridOpts. И еще не срабатывает resizable: { enabled : false }, все равно можно растягивать изображения. 

Есть официальный демо-пример, там ресайз каким-то образом отключается.

Мои текущие настройки:

$scope.gridsterOpts = {
    margins: [20, 20],
    outerMargin: false,
    floating: true,
    pushing: true,
    draggable: { 
       enabled: true 
    },
    resizable: { 
       enabled: false,
       handles: ['n', 'e', 's', 'w', 'se', 'sw'] 
    }
}


Необходимо, чтобы изображения не накладывались друг на друга, т.е. учитывался и
реальный размер, и они просто располагались рядом; чтобы не было возможности ресайз
при помощи растягивания изображений за угол. И была возможность перемещения. Сейчас изображения перемещаются нормально, но накладываются друг на друга, и все равно доступен ресайз.

Обновление: 
После добавления к html-блоку div, в котором находятся все изображения, опции  ресайз выключился. Осталась проблема наложения друг на друга изображений.
    

Ответы

Ответ 1

Ответ @VanyaAvchyan

configuration

$scope.gridsterOpts = {
    margins: [20, 20],
    outerMargin: false,
    floating: true,
    pushing: true,
    draggable: { 
       enabled: true 
    },
    resizable: { 
       enabled: false,
       handles: ['n', 'e', 's', 'w', 'se', 'sw'] 
    }
}


view


  

    

  



styles

.gridster-item:not(.gridster-item-moving) {
  z-index: initial; /* drop z-index to make it possible to set higher than 2 z-index for widget elements */
}