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

Get new size of Gridster widget after resize

提问by microchip78

Using Gridster, we have created a grid with resizable widgets using the resize.enabledconfig option.

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

After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?

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

回答by ne1410s

I have recently been working with gridster resizing too. Here is how I grabbed the size

我最近也在使用 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');
});

The 'newHeight' and 'newWidth' can be read within the resize-stop event. You can also explore the 'this' instance to get the sizes in units, rather than pixels.

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

回答by Mark Amery

If you want the new size in Gridster blocks, instead of in pixels, you have a couple of choices.

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

Firstly, your Gridster instance gets two properties added to it that contain this information after the resize event:

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

• .resize_last_sizex- the new width of the most recently resized widget, in grid blocks
• .resize_last_sizey- the new height of the most recently resized widget, in grid blocks

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

However, the existence of these is presently undocumented and it's not clear to me whether client code is supposed to use them.

但是，这些的存在目前没有记录，我不清楚客户端代码是否应该使用它们。

Perhaps a cleaner approach is to use the .serialize()method, passing it the widget that was just resized. You can get the widget from the arguments passed to the .resize.stophandler. You can use the .size_xand .size_yproperties of the objects returned by .serialize()to get size of the newly resized widget in grid blocks.

也许更简洁的方法是使用该.serialize()方法，将刚刚调整大小的小部件传递给它。您可以从传递给.resize.stop处理程序的参数中获取小部件。您可以使用.size_x和.size_y返回的对象的属性.serialize()来获取网格块中新调整大小的小部件的大小。

Example:

例子：

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

Here's a jsfiddle demonstrating the above code.

这是一个演示上述代码的jsfiddle。