javascript - gridster.js ですべてのウィジェットのサイズを変更する

Question

私は Gridster.js を使用したプロジェクトに取り組んでおり、必要な列の数を選択できるユーザー オプションがあります。（明らかに）完成していませんが、列番号が選択されたときにすべてのボックスのサイズを変更する機能に取り組んでいます。

私の問題は、サイズが変更されたときにグリッド内のスペースが最適化されず、ウィジェットをオーバーラップさせずにそれを行うアルゴリズムを見つけようとしていることです (ウィジェットの位置を変更しようとすると、 resize: false オプションが明らかにオーバーライドされます) .

私はそれに取り組み続けるつもりですが、この問題で頭を壁にぶつけているように見えるので、これについての助けが欲しいです. 前もって感謝します。

// Set column number and resize/move widgets
$(".edit-column-option").click(function() {
$("#edit-modal").foundation('reveal', 'close');

var findColumnNumber = this.innerHTML.split("");
var columnNumber = parseInt(findColumnNumber[0]);

var options = gridster.options;
var resize = options.resize;
var dimensionX = gridster.cols;
var dimensionY = gridster.rows;

console.log("Columns: " + dimensionX);
console.log("Rows: " + dimensionY);

resize.max_size = [(Math.floor(dimensionX / columnNumber)), (Math.floor(dimensionX / columnNumber))];
resize.min_size = [2, 2];
options.max_size_x = Math.floor(dimensionX / columnNumber);
options.min_size_x = 2;
    options.max_size_y = options.max_size_x;
    options.min_size_y = options.max_size_x;

var resize_axes = options.max_size_x;

console.log(gridster);

var arr = localStorage.getObject('cloudWidgetArray');

$(gridster.$widgets).each(function(i) {
  setTimeout(function() {
    var a = gridster.$widgets.eq(i).height() - gridster.$widgets.eq(i).find('.title').height();
    gridster.$widgets.eq(i).find('.title').next('div').height(a.toString());
    gridster.$widgets.eq(i).find('.title').next('div').css('opacity','1');
    refreshThis(gridster.$widgets.eq(i).data('li'));
    serialize();
  }, 200);

    gridster.resize_widget(gridster.$widgets.eq(i), resize_axes, resize_axes, function() {
    });

  console.log("Widget grid data: " + gridster.$widgets.eq(i).size_y);

});

    for(var i = 1; i < arr.length; i++) {
        for (var a = 1; a <= dimensionY; a++) {
            for (var b = 1; a <= dimensionX; b++) {
                if (gridster.can_move_to(arr[i]), a, b, a) {
                    if (gridster.is_occupied(a, b)) {
                        console.log("Can't move.");
                        break;
                    }
                    else {
                        var new_wdg = {
                            size_x: options.max_size_x,
                            size_y: options.max_size_x,
                            row: a,
                            col: arr[i].col - 1
                        };
                        gridster.mutate_widget_in_gridmap(gridster.$widgets.eq(i), arr[i], new_wdg);
                        i++;
                        a = 1;
                        b = 1;
                        console.log(arr[i]);
                        break;
                    }
                }
            }
        }
    }
});