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 );

Above code will not work unless you have to add li tag in add_widget function like

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 );