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-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<h1>gridstack.js issue demo</h1>
<p>Try draggging a node on the edges of the container</p>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />
<br />
<br />

<div class="dialog-example">
  <div class="grid-stack"></div>
</div>

CSS

body{
  overflow:auto;  
}
.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}
.dialog-example{
  height:300px;
  width:500px;
  background-color: lightgray;
  position: absolute;
  overflow: auto;
}

JavaScript

var options = { // put in gridstack options here
  disableOneColumnMode: true, // for jfiddle small window size
  float: true
};
var grid = GridStack.init(options);

var count = 4;
var items = [
	{x: 0, y: 0, w: 2, h: 2, content:'1'},
	{x: 1, y: 0, w: 2, h: 2, content:'2'},
	{x: 0, y: 1, w: 2, h: 2, content:'3'},
	{x: 1, y: 1, w: 2, h: 2, content:'4'},
];
grid.load(items);
grid.on('drag', (event, el) => {
            const placeholder =
                el.parentElement.getElementsByClassName('grid-stack-placeholder')[0] || undefined;
            const height = 100;
            const container = el.parentElement.parentElement;
            if (
                placeholder && (event.pageY - height - container.offsetTop < 0 ||
                event.pageY + height - container.offsetTop > container.offsetHeight)
            ) {
                placeholder.scrollIntoView({ behavior: 'smooth' });
            }
        });
addNewWidget = function () {
  var node = items[count] || {
    x: Math.round(12 * Math.random()),
    y: Math.round(5 * Math.random()),
    w: Math.round(1 + 3 * Math.random()),
    h: Math.round(1 + 3 * Math.random())
  };
  node.content = String(count++);
  grid.addWidget(node);
  return false;
};

addNewWidget();
addNewWidget();