thiết lập chiều rộng tối thiểu và chiều cao cho mỗi gridster.js phụ tùng

Question

Tôi đang sử dụng gridster.js kết hợp với jquery UI để làm cho nó thay đổi kích thước bằng cách kéo sử dụng bit này:

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

như đề xuất trên GitHub:

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

Tôi cần chỉ định chiều rộng và chiều cao tối thiểu cho từng tiện ích con chứ không phải cho toàn bộ khung lưới.

Có cách nào rõ ràng để đạt được chức năng này không?

Cảm ơn

Answer 1

Nếu nó giúp bất cứ ai, tôi quản lý một giải pháp:

Added một dữ liệu thuộc tính cho mỗi widget để xác định X tối thiểu và Y:

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

Và sau đó viết lại các thay đổi kích thước chức năng:

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

Thay vì đặt chiều cao và chiều cao tối thiểu Tôi chạy một dấu chấm câu ion có thể thay đổi kích thước bắt đầu

nhận các thuộc tính minx và miny và điều chỉnh các thông số để thay đổi kích thước cho phù hợp.

Answer 2

Kể từ phiên bản 0.2.1, bạn có thể sử dụng chức năng thay đổi kích thước tích hợp để làm cho các tiện ích có thể thay đổi kích thước.

Mặc dù không được ghi lại tài liệu, bạn có thể sử dụng resize.min_size để chỉ định kích thước tối thiểu của các tiện ích. resize.max_size được ghi lại và hoạt động tương tự.

dụ:

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