如何使Gridster添加小部件可调整大小？ [英] How to make Gridster added widgets resizable?

问题描述

我的项目基于小提琴

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

But I have made it so you can add widgets using:

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

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

Now this works, it does create a new widget, but the widget is not resizeable. Even though it's created with the class and id needed, I think it's because It's a dynamically added widget. Is there any way I can get this to work?

谢谢。

推荐答案

我会尝试这样的事情：

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

这篇关于如何使Gridster添加小部件可调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！