Получить новый размер виджета Gridster после изменения размера

Недавно я тоже работал с изменением размера gridster. Вот как я схватил размер

 $(function () { //DOM Ready
    $scope.gridster = $(".gridster ul").gridster({
        ...
        resize: {
            enabled: true,
            start: function (e, ui, $widget) {
                ...
            },
            stop: function (e, ui, $widget) {
                var newHeight = this.resize_coords.data.height;
                var newWidth = this.resize_coords.data.width;
                ...
            }
        },
        ...
    }).data('gridster');
});

'newHeight' и 'newWidth' можно прочитать в событии resize-stop. Вы также можете изучить экземпляр this, чтобы получить размеры в единицах, а не в пикселях.

Если вам нужен новый размер в блоках Gridster вместо в пикселях, у вас есть несколько вариантов.

Во-первых, к вашему экземпляру Gridster добавляются два свойства, которые содержат эту информацию после события изменения размера:

• .resize_last_sizex — новая ширина самого последнего измененного виджета в блоках сетки.
• .resize_last_sizey — новая высота самого последнего измененного размера виджета в блоках сетки.

Однако их существование в настоящее время не задокументировано, и мне не ясно, должен ли клиентский код использовать их.

Возможно, чище будет использовать метод .serialize(), передав ему только что измененный размер виджета. Вы можете получить виджет из аргументов, переданных обработчику .resize.stop. Вы можете использовать свойства .size_x и .size_y объектов, возвращаемых .serialize(), чтобы получить размер нового виджета с измененным размером в блоках сетки.

Пример:

var gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 100],
    widget_margins: [5, 5],
    helper: 'clone',
    resize: {
        enabled: true,
        stop: function (e, ui, $widget) {
            var newDimensions = this.serialize($widget)[0];

            alert("New width: " + newDimensions.size_x);
            alert("New height: " + newDimensions.size_y);

            // Alternative approach; these properties are undocumented:
            // alert("New width: " + this.resize_last_sizex);
            // alert("New height: " + this.resize_last_sizey);
        }
    }
}).data('gridster');

Вот jsfiddle, демонстрирующий приведенный выше код.