如何使 Gridster 添加的小部件可调整大小？答案

【问题标题】：How to make Gridster added widgets resizable?如何使 Gridster 添加的小部件可调整大小？
【发布时间】：2013-05-31 03:40:10
【问题描述】：

我的项目基于 Fiddle

但我已经做到了，因此您可以使用以下方法添加小部件：

$(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 创建的，我认为这是因为它是一个动态添加的小部件。有什么办法可以让它工作吗？

谢谢。

【问题讨论】：

标签： javascript jquery gridster

【解决方案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);
    } });

【讨论】：

【解决方案2】：

根据documentation from 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
    }
    ...
});

【讨论】：

【解决方案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;

【讨论】：