在調整大小後獲取Gridster小部件的新大小

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

的「newHeight」和「newWidth」可以調整大小停車事件中被讀取。 您還可以瀏覽'this'實例以單位獲取大小，而不是像素。

Answer 2

如果您想在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。