为每个 gridster.js 小部件设置最小宽度和高度答案

【问题标题】：setting minimum width and height for each gridster.js widget为每个 gridster.js 小部件设置最小宽度和高度
【发布时间】：2012-11-25 09:08:25
【问题描述】：

我正在使用 gridster.js 与 Jquery UI 相结合，通过使用此位拖动来调整大小：

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    }
});

$('.ui-resizable-handle').hover(function() {
    layout.disable();
}, function() {

    layout.enable();
});

function resizeBlock(elmObj) {

    var elmObj = $(elmObj);
    var w = elmObj.width() - grid_size;
    var h = elmObj.height() - grid_size;

    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

        grid_w++;
    }

    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

        grid_h++;
    }

    layout.resize_widget(elmObj, grid_w, grid_h);
}

按照 GitHub 上的建议：

http://jsfiddle.net/maxgalbu/UfyjW/

我需要为每个小部件指定最小宽度和高度，一般不需要为 gridster 指定。

有没有明显的方法来实现这个功能？

谢谢

【问题讨论】：

标签： jquery jquery-ui gridster

【解决方案1】：

如果它对任何人有帮助，我管理了一个解决方案：

为每个小部件添加了一个数据属性以指定最小 X 和 Y：

data-minx="2" data-miny="2"

然后重写了resize函数：

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    containment: '#layouts_grid ul',
    autoHide: true,
    start: function(event, ui) {
        var resized = $(this);
        $('.layout_block').resizable( "option", "minWidth", resized.data('minx') * grid_size );
        $('.layout_block').resizable( "option", "minHeight", resized.data('miny') * grid_size );
    },
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);   
        }, 300);
    }
});

我没有设置最小高度和宽度，而是在可调整大小的开始时运行一个函数

获取 minx 和 miny 属性并相应调整参数以调整大小。

【讨论】：

在当前版本 (0.7.0) 中，您可以使用 data-max-sizex、data-max-sizey、data-min-sizex 和 data-min-sizey HTML 属性。

【解决方案2】：

从 0.2.1 版开始，您可以使用内置的调整大小功能来调整小部件的大小。

虽然没有记录，但您可以使用resize.min_size 指定小部件的最小尺寸。 resize.max_size 已记录在案并且工作方式相同。

示例：

resize: {
    enabled: true,
    min_size: [4, 4]
}

【讨论】：

是的，但这不是每个小部件，而是针对整个网格的。