调整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;
                    }
                }
            }
        }
    }
});