Question

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

用户完成调整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');
});

可以在resize-stop事件中读取'newHeight'和'newWidth'。您还可以浏览“this”实例以获取单位大小，而不是像素。

Answer 2

如果你想在Gridster块中使用新的大小，而不是in pixels，那么你有几个选择。

首先，在调整大小事件后，您的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 demonstrating the above code。

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

2 个答案: