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

Question

使用Gridster，我们使用resize.enabledconfig 选项创建了一个带有可调整大小的小部件的网格。

在用户完成调整 Gridster 小部件的大小后，我们希望获得小部件的新最终大小。我们应该怎么做？

Answer 1

我最近也一直在使用 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”实例以获取单位而不是像素的大小。

Answer 2

如果您想要 Gridster 块中的新大小，而不是像素，您有几个选择。

首先，您的 Gridster 实例在 resize 事件之后添加了两个包含此信息的属性：

• .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。