Gridster dynamically added widget make draggable

Question

I've been looking for an answer to this for a while. The only topic I found that was related was this . However, this never seemed to have been answered.

My question is: if I add a new widget to my gridster object dynamically, this widget is not draggable though I need it to be. How do I achieve this functionality?

my Gridster object is created as such:

$(function(){
    gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [gridbase_x, gridbase_y],
      widget_margins: [5, 5],
      helper: 'clone',
      resize: {
        enabled: true
      }
    }).data('gridster');
  });

And my widgets added as such:

            gridster.add_widget("<iframe id=\"myframe\" src=\"web/widgets/"+wname+".html\" width=\""+wwidth+"\" height=\""+wheight+"\" frameborder=\"0\"></iframe>", wblocks, hblocks, 1, 2 );

You can assume that the parameters in the widget's HTML are correct, I have tested this.

Answer 1

gridster.add_widget("<iframe id=\"myframe\" src=\"web/widgets/"+wname+".html\" width=\""+wwidth+"\" height=\""+wheight+"\" frameborder=\"0\"></iframe>", wblocks, hblocks, 1, 2 );

除非您必须在add_widget函数中添加li标签，否则上述代码将不起作用

gridster.add_widget("<li class="gw_s"><iframe id=\\"myframe\\" src=\\"web/widgets/"+wname+".html\\" width=\\""+wwidth+"\\" height=\\""+wheight+"\\" frameborder=\\"0\\"></iframe></li>", wblocks, hblocks, 1, 2 );