5

設定された列数と固定数のタイルで始まるグリッドスターベースのレイアウトがあります。設定後に列数を変更する方法はありますか? -- たとえば、3 列から始めます。

(タイル1 | タイル2 | タイル3
タイル4 | タイル5 | タイル6)

2 列のレイアウトに変更します。

(タイル1 | タイル
2 タイル3 | タイル4 タイル
5 | タイル6)

この変更は、ユーザーの操作によって行われます。

私は次のようなものを使用しようとしました:

gridster = $("#gridster-container").gridster({
   widget_margins: [30, 30],
   widget_base_dimensions : [ 200, 170 ],
   max_cols:numberOfColumns,
   avoid_overlapped_widgets: true
}).data('gridster');

// user interaction

gridster.options.max_rows = 2;

gridster.init();

しかし、それはうまくいかないようです...

data-rowとの値を手動でdata-col新しい位置に変更して、init() を呼び出しました (init とは呼びませんでした)。

gridsterコードを追加して変更することさえ試みました

    // HACK
    if (max_cols && max_cols < this.cols) {
        this.cols = max_cols;
    }

メソッドにfn.generate_grid_and_stylesheet（行の直後：

    if (max_cols && max_cols >= min_cols && max_cols < this.cols) {
        this.cols = max_cols;
    }

）。

これらのオプションのいずれかを使用してタイルを正しい位置に移動させることはできますが、その後のドラッグ動作は... 奇妙です。

私が何を意味するかを説明するためにjsfiddle（ http://jsfiddle.net/qT6qr/ ）をセットアップしました（フィドルの上部にある行のgridster.min.jsを許してください、私が見つけたcdnが見つかりませんでしたそれに使用できます...）。

前もって感謝します

4

2 に答える 2

3

同様の問題があり、このアプローチで機能させることができました：

var gridster = $(".gridster ul").gridster().data('gridster');
gridster.options.min_cols = 5; // Not necessarily required because of the following size changes, but I did it for clarity
gridster.options.widget_base_dimensions = [240, 400];
gridster.options.min_widget_width = 240;

// This section was for existing widgets. Apparently the code for drawing the droppable zones is based on the data stored in the widgets at creation time
for (var i = 0; i < gridster.$widgets.length; i++) {
    gridster.resize_widget($(gridster.$widgets[i]), 1, 1);
}

gridster.generate_grid_and_stylesheet();
于 2013-07-30T13:52:33.640 に答える