I am creating a empty grid with gridstack.js and them adding new elements thougth its API. The new items are visualized correctly. They and are re-sizable, but I can not drag them around the grid. I tried to use enable() and also enableMove(true, true) but it seem have no effect.
This example only contains one elements, but i pretend to add more when it works.
This is the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="/static/css/jquery-ui.min.css" rel="stylesheet">
<link href="/static/fonts/css/fontawesome-all.css" rel="stylesheet">
<link href="/static/css/energy.css" rel="stylesheet">
<link href="/static/css/icons.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/gridstack.min.css" />
</head>
<body>
<header>
</header>
<main>
<article class="container-fluid">
<div class="slot big text-center">
<div class="grid-stack"></div>
</div>
</article>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js" integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps=" crossorigin="anonymous"></script>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/materialize.min.js"></script>
<script src="/static/js/clipboard.min.js"></script>
<script type="text/javascript" src='/static/js/gridstack.min.js'></script>
<script type="text/javascript" src='/static/js/gridstack.jQueryUI.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$Grid = $('.grid-stack');
$Grid.enableMove(true, true);
$Grid.gridstack(
{
}
);
const widget = '<div data-widget-source="/widgets/1/" class="widget" style="background-color: red;"></div>';
$Grid.data('gridstack').addWidget(
widget,
1, 1, 1, 1,false,
1,12,1,12, id ="slot_1"
);
});
</script>
</body>
</html>
The div pased to the
addWidgetfunction should have this structure to work correctly: