Как сделать так, чтобы добавленные виджеты в Гридстере можно было изменять

Question

Я основал свой проект на этой скрипке

Но я сделал это, чтобы вы могли добавлять виджеты, используя:

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

Теперь это работает, он создает новый виджет, но размер виджета не изменяется. Хотя он создан с необходимыми классом и идентификатором, я думаю, это потому, что это динамически добавленный виджет. Есть ли способ заставить это работать?

Благодарю.

Answer 1

Я бы попробовал что-то вроде этого:

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

Answer 2

Согласно документации от 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
    }
    ...
});

Answer 3

Когда вы добавляете новый виджет, вам просто нужно добавить HTML-код для маленькой стрелки в правом нижнем углу... попробуйте что-то вроде этого

var widget = gridster.add_widget('<li />', width, heigth, newWidgetCol, newWidgetRow);
var resizableWidgetHtml = '<span class="gs-resize-handle gs-resize-handle-both"></span>';
widget.attr('id', ui.draggable.id);
widget.html(htmlContent+resizableWidgetHtml);
widget.resize.enabled = true;