ustawienie minimalną szerokość i wysokość dla każdego gridster.js widget

Question

Używam gridster.js połączeniu z jQuery UI, aby to skalowalny, przeciągając za pomocą tego bitu:

$('.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); 
} 

jak sugerowano na GitHub:

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

Muszę określić minimalną szerokość i wysokość dla każdego widgetu, a nie dla generatora siatki.

Czy istnieje oczywisty sposób osiągnięcia tej funkcji?

Dzięki

Answer 1

Jeśli to pomoże nikogo, udało mi się rozwiązanie:

dodał danych atrybut każdego widgetu, aby określić minimalną X i Y:

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

A potem przepisał Resize funkcja:

$('.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); 
    } 
}); 

Zamiast ustawiać minimalną wysokość i szerokość, uruchamiam funkcję jon na resizable start

który dostaje atrybuty minx i miny i dostosowuje parametry do zmiany rozmiaru odpowiednio.

Answer 2

Od wersji 0.2.1 można użyć funkcji zmiany rozmiaru, aby dostosować rozmiar widżetów.

Chociaż dokumentacja nie jest udokumentowana, można użyć parametru resize.min_size, aby określić minimalny rozmiar widgetów. resize.max_size jest udokumentowany i działa tak samo.

przykład:

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