title: Slowdown when using gridstack within a bootstrap panel
body: <p>I'm using Gridstack.js to create a grid of draggable panels and it works great.  When I put my grid inside a Bootstrap "panel", things are really slow and unresponsive when I drag large panels.  Very strange.</p>
  
  <p>Here's my markup:</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          DETAILS
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="panel panel-default" id="reportPanel"&gt;
              &lt;div class="panel-heading"&gt;
                  Report Panel
              &lt;/div&gt;
              &lt;div class="panel-body panelBackground"&gt;
                  &lt;div class="grid-stack" id="mainGrid"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my js:</p>
  
  <pre><code>//startup gridstack
  $('.grid-stack').gridstack({cell_height: 80, vertical_margin: 10});
  
  var gridObject = $('#mainGrid');
  var grid = gridObject.data('gridstack');
  grid.remove_all();
  
  grid.batch_update();
  _.each(panelInformationArray, function (node) {
      var widget = '&lt;div class="grid-stack-item"&gt;';
      widget += '&lt;div class="grid-stack-item-content"&gt;&lt;/div&gt;';
      widget += '&lt;/div&gt;';
      grid.add_widget(widget,
                      node.X,
                      node.Y,
                      node.Width,
                      node.Height, false);
  });
  grid.commit();
  </code></pre>
  
  <p>If I move that same grid outside the panels, it works nicely.  Any idea what's going on?</p>