2

このフィドルに基づいてプロジェクトを作成しました

しかし、次を使用してウィジェットを追加できるようにしました。

$(document).on("click", "#add", function() {
var gridster = $(".layouts_grid ul").gridster().data('gridster');    

gridster.add_widget('<li class="layout_block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1)
    .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);
    } });

これで機能し、新しいウィジェットが作成されますが、ウィジェットのサイズは変更できません。必要なクラスとIDで作成されていますが、動的に追加されるウィジェットだからだと思います。これを機能させる方法はありますか？

ありがとう。

4

3 に答える 3

3

私はこのようなことを試してみます:

$(document).on("click", "#add", function() {
var gridster = $(".layouts_grid ul").gridster().data('gridster');    

gridster.add_widget('<li class="layout_block" id="block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1);
    $('#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);
    } });
于 2013-06-03T15:44:03.500 に答える
1

Gridsterのドキュメントによると、 resize プロパティを使用できます。

gridster.add_widget('<li class="layout_block" data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="remove_element">X</div></li>', 1, 1)
    .resizable({ 
    ...
    stop: function(event, ui) {
        ...
    },
    resize: {
        enabled:true
    }
    ...
});
于 2013-11-11T08:30:20.253 に答える