Javascript 调整大小后获取Gridster小部件的新大小

使用，我们使用

resize.enabled

config选项创建了一个具有可调整大小的小部件的网格

---

在用户完成调整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事件后包含此信息：

• .resize\u last\u sizex

  -最近调整大小的小部件的新宽度，以网格块为单位

• .resize\u last\u sizey

  -最近调整大小的小部件的新高度，以网格块为单位

然而，这些代码的存在目前还没有文档记录，我也不清楚客户端代码是否应该使用它们

也许更干净的方法是使用该方法，将刚刚调整大小的小部件传递给它。您可以从传递给处理程序的参数中获取小部件。您可以使用

.serialize（）

返回的对象的

.size\u x

和

.size\u y

属性来获取网格块中新调整大小的小部件的大小

例如：

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');

这是一个例子