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

Question

我使用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。

是否有明显的方法来实现这一功能？

感谢

Answer 1

如果帮助别人，我管理的解决方案：

增加了数据属性，以每个插件指定最小X和Y：

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

然后改写了调整大小功能：

$('.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属性并相应地调整参数以调整大小。

Answer 2

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

虽然没有记录，但您可以使用resize.min_size来指定小部件的最小大小。 resize.max_size已记录并且工作原理相同。

例如：

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