5

gridster.jsをJqueryUIと組み合わせて使用​​し、次のビットを使用してドラッグすることでサイズを変更できるようにしています。

$('.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/

一般的にグリッドスターではなく、ウィジェットごとに最小の幅と高さを指定する必要があります。

この機能を実現するための明白な方法はありますか？

ありがとう

4

2 に答える 2

5

それが誰かを助けるなら、私は解決策を管理しました：

最小の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属性を取得し、それに応じてサイズを変更するためのパラメーターを調整します。

于 2012-11-25T11:18:55.830 に答える
3

バージョン0.2.1以降、組み込みのサイズ変更機能を使用して、ウィジェットのサイズを変更できます。

文書化されていませんresize.min_sizeが、ウィジェットの最小サイズを指定するために使用できます。resize.max_sizeは文書化されており、同じように機能します。

例：

resize: {
    enabled: true,
    min_size: [4, 4]
}
于 2014-02-24T11:45:21.057 に答える