Slowdown when using gridstack within a bootstrap panel

Question

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.

Here's my markup:

<div class="panel panel-default">
    <div class="panel-heading">
        DETAILS
    </div>
    <div class="panel-body">
        <div class="panel panel-default" id="reportPanel">
            <div class="panel-heading">
                Report Panel
            </div>
            <div class="panel-body panelBackground">
                <div class="grid-stack" id="mainGrid">
                </div>
            </div>
        </div>
    </div>
</div>

and my js:

//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 = '<div class="grid-stack-item">';
    widget += '<div class="grid-stack-item-content"></div>';
    widget += '</div>';
    grid.add_widget(widget,
                    node.X,
                    node.Y,
                    node.Width,
                    node.Height, false);
});
grid.commit();

If I move that same grid outside the panels, it works nicely. Any idea what's going on?