GridStack Row Issue

by Alain Dumesny

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack-extra.css">
<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
    <div class="grid-stack-item-content">
      test
    </div>
  </div>
  <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
    <div class="grid-stack-item-content">
      test2
    </div>
  </div>
</div>

CSS

.grid-stack-item-content {
  background-color: red;
}

JavaScript

$(function() {
  var options = {
    cellHeight: 80,
    verticalMargin: 10,
    disableResize: true
  };
  $('.grid-stack').gridstack(options);
});
$(document).on('change', '.grid-stack', function(event, items) {
  var updatedWidgets = {};
  for (var i = 0; i < items.length; i++) {
    var widget = items[i].el;
    console.log(widget.data('gs-x') != items[i].x || widget.data('gs-y') != items[i].y);
  }

});