gridstack.js issue base

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

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>



<div class="container-fluid">
        <h1>Event DataTransfer Demo</h1>

        <div class="row">
            <div class="col-md-3">
                <div class="sidebar">
                    <div class="grid-stack-item" id="draggable-chart">
                        <div class="grid-stack-item-content">Drag me</div>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="grid-stack grid-stack-12"></div>
            </div>
        </div>
    </div>

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

JavaScript

const draggableItem = document.getElementById("draggable-chart");


const ondragstart = (event) => {
  console.log("-- drag start --")
};

const ondragend = (event) => {
  console.log("-- drag end --")
};

const onmousedown = (event) => {
  console.log("-- mouse down --")
};

const onmouseup = (event) => {
  console.log("-- mouse up --")
};

draggableItem.addEventListener("dragstart", ondragstart);
draggableItem.addEventListener("dragend", ondragend);
draggableItem.addEventListener("mousedown", onmousedown);

draggableItem.addEventListener("mouseup", onmouseup);

let options = {
  column: 12,
  acceptWidgets: function(el) {
    return true;
  }
};
let items = [{
    x: 0,
    y: 0,
    w: 9,
    h: 1,
    content: 'Sample Element'
  },
  {
    x: 9,
    y: 0,
    w: 3,
    h: 2,
    content: 'Sample Element 2'
  }
];

let grid = GridStack.init(options)

grid.load(items);

grid.on('dropped', function(event, previousWidget, newWidget) {
  if (event.dataTransfer) {
    console.log('gridstack dropped: ', event.dataTransfer.getData('message'));
  }
});

GridStack.setupDragIn(
  '.sidebar .grid-stack-item', {
    appendTo: 'body',
    helper: clone,
    start: start
  }
);

function clone(event) {
  return event.target.cloneNode(true);
}

function start(event) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('message', 'Hello World');
  }
}