我将 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 一般指定。
有没有明显的方法来实现此功能?
谢谢
最佳答案
如果它对任何人有帮助,我解决了一个解决方案:
为每个小部件添加了数据属性以指定最小 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 属性并相应地调整参数以调整大小。
关于jquery - 设置每个 gridster.js 小部件的最小宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13549664/