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

问题描述：

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

在用户完成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”可以调整大小停车事件中被读取。您还可以浏览'this'实例以单位获取大小，而不是像素。

答

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

首先，你Gridster实例都有两个属性添加到它包含resize事件后，这样的信息：

.resize_last_sizex - 最近调整控件的新宽度，在网格块
.resize_last_sizey - 最近调整大小的窗口小部件的新高度，在网格块中

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

也许一个更简洁的方法是使用.serialize()方法，并将它刚刚调整大小的小部件传递给它。您可以从传递给.resize.stop处理程序的参数中获取小部件。您可以使用.serialize()返回的对象的.size_x和.size_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');

这里有一个jsfiddle demonstrating the above code。

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

相关推荐