gridstack.js issue base

Use this as a base for examples for gridstack.js issues.

by Alain Dumesny

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-2 d-none d-md-block" style="position: relative;">
    <div style="position: sticky; top: 0;">
      <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
        <div>
          <ion-icon name="trash" style="font-size: 300%"></ion-icon>
        </div>
        <div>
        <span>remove</span>
        </div>
      </div>
      <div class="newWidget grid-stack-item" gs-min-w="3">
        <div class="grid-stack-item-content" style="padding: 5px;">
          <div>
            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
          </div>
          <div>
          <span>add</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-10">
    <div class="grid-stack"></div>
    <div class="grid-stack two"></div>
  </div>
</div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
#trash {
  background: rgba(255, 0, 0, 0.4);
}

.two {
  background: lavender;
}

JavaScript

let grids = GridStack.initAll({
  acceptWidgets: true,
  dragIn: ".newWidget", // class that can be dragged from outside
  dragOut: false,
  dragInOptions: {
    revert: "invalid",
    scroll: false,
    appendTo: "body",
    helper: "clone"
  },
  removable: "#trash", // drag-out delete class
  removeTimeout: 100,
  disableOneColumnMode: true,
  float: true,
  row: 4,
});

let items = [
  { x: 0, y: 0, w: 4, h: 1, content: "1" },
];
grids.forEach(function(grid) {
  grid.load(items);
});