サイズ変更後のGridsterウィジェットの新しいサイズを取得

Question

Gridsterを使用して、resize.enabled設定オプションを使用してサイズ変更可能なウィジェットを含むグリッドを作成しました。

ユーザーがGridsterウィジェットのサイズ変更を完了した後、ウィジェットの新しい最終サイズを取得したいと考えています。どうすればこのことができますか？

Answer 1

私は最近、グリスタのサイズ変更にも取り組んでいます。ここ は、私はサイズ変更・停止イベント中に読み取ることができる大きさ

$(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

グリッドスターブロックで新しいサイズを使用する場合は、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です。