我正在使用 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;
}
}
}
}
}
});