我正在使用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/
我需要为每个小部件指定最小宽度和高度,而不是一般的网格。
有没有一种明显的方法可以实现此功能?
谢谢
如果它对任何人有帮助,我管理了一个解决方案:
为每个小部件添加了数据属性以指定最小 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 属性并相应地调整参数以调整大小。
从版本 0.2.1 开始,您可以使用内置的大小调整功能使小部件可调整大小。
尽管没有记录,但您可以使用resize.min_size
来指定小部件的最小大小。 resize.max_size 已记录并具有相同的工作原理。
例:
resize: {
enabled: true,
min_size: [4, 4]
}