5

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

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

4

2 に答える 2

12

私は最近、グリッドスターのサイズ変更にも取り組んでいます。これが私がサイズをつかんだ方法です

 $(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」は、resize-stop イベント内で読み取ることができます。「this」インスタンスを調べて、ピクセルではなく単位でサイズを取得することもできます。

于 2013-11-27T09:33:53.737 に答える
4

ピクセル単位ではなく Gridster ブロック単位で新しいサイズが必要な場合は、いくつかの選択肢があります。

まず、Gridster インスタンスは、サイズ変更イベントの後に、この情報を含む 2 つのプロパティを追加されます。

  • .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 を次に示します。

于 2014-05-31T19:42:31.690 に答える