单击Gridster添加小部件按钮

gridster add widget on button click

本文关键字：按钮 小部 添加 Gridster 单击      更新时间：2023-09-26

我正在评估gridster jquery插件，用于自定义仪表板，它似乎非常适合我的需求。但有件事我搞不定。我想在单击"添加按钮"时动态添加一个新的小部件，使用库中记录的add_widget函数。结果是小部件似乎添加了，但随后消失，一切都回滚到初始状态。

$(function(){
    gridster = $(".gridster ul").gridster({
                widget_base_dimensions: [100, 120],
                widget_margins: [5, 5],
                draggable: {
                    handle: '.dragDiv'
                }
    }).data('gridster');   
    gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
    $(document).on( "click", "#addWidgetButton", function() { 
       gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
    });
});

看这张图片。

正如您在示例中看到的，我使用相同的函数首先在通用范围内添加小部件(并且它可以工作)，然后在按钮单击事件处理程序中添加小部件，但它不能正常工作。

怎么了?

你应该禁用默认的按钮点击事件。

正确的代码:

$(document).on( "click", "#addWidgetButton", function(e) {
     e.preventDefault(); 
     gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
});

相关文章：