如何使Gridster添加小部件可resize？

我把我的项目基于这个小提琴

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

$(document).on("click", "#add", function() { var gridster = $(".layouts_grid ul").gridster().data('gridster'); gridster.add_widget('
X
', 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); } }); 

现在这个工作，它确实创建了一个新的小部件，但小部件不能resize。 虽然它是用所需的类和id创建的，但我认为这是因为它是一个动态添加的小部件。 有什么方法可以让这个工作吗？

谢谢。

Answer 1

我会尝试这样的事情：

 $(document).on("click", "#add", function() { var gridster = $(".layouts_grid ul").gridster().data('gridster'); gridster.add_widget('
X
', 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('
X
', 1, 1) .resizable({ ... stop: function(event, ui) { ... }, resize: { enabled:true } ... }); 

Answer 3

当您添加新小部件时，您只需要在botom rigth角上添加小箭头的html代码…尝试这样的事情

 var widget = gridster.add_widget('
', width, heigth, newWidgetCol, newWidgetRow); var resizableWidgetHtml = ''; widget.attr('id', ui.draggable.id); widget.html(htmlContent+resizableWidgetHtml); widget.resize.enabled = true;