Merge pull request #1069 from adumesny/develop

griditems with x=0 placement fix

Author: Alain Dumesny

doc/CHANGES.md

@@ -28,7 +28,8 @@ Change log
 - add `gridstack.poly.js` for IE and older browsers, removed `core-js` lib from samples (<1k vs 85k), and all IE8 mentions ([#1061](https://github.com/gridstack/gridstack.js/pull/1061)).
 - add `jquery-ui.js` (and min.js) as minimal subset we need (55k vs 248k), which is now part of `gridstack.all.js`. Include individual parts if you need your own lib instead of all.js
 ([#1064](https://github.com/gridstack/gridstack.js/pull/1064)).
-- changed jquery dep to lowest we can use (>=1.8) ([#629](https://github.com/gridstack/gridstack.js/issues/629)).
+- changed jquery dependency to lowest we can use (>=1.8) ([#629](https://github.com/gridstack/gridstack.js/issues/629)).
+- fix for griditems with x=0 placement wrong order (introduced for #1017) ([#1054](https://github.com/gridstack/gridstack.js/issues/1054)).
 
 ## v0.5.3 (2019-11-20)
 

spec/gridstack-spec.js

@@ -1376,4 +1376,41 @@ describe('gridstack', function() {
       }
     });
   });
+
+  describe('custom grid placement #1054', function() {
+    var HTML = 
+    '<div style="width: 992px; height: 800px" id="gs-cont">' +
+    '  <div class="grid-stack">' +
+    '    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="9">' +
+    '      <div class="grid-stack-item-content"></div>' +
+    '    </div>' +
+    '    <div class="grid-stack-item" data-gs-x="0" data-gs-y="9" data-gs-width="12" data-gs-height="5">' +
+    '      <div class="grid-stack-item-content"></div>' +
+    '    </div>' +
+    '    <div class="grid-stack-item" data-gs-x="0" data-gs-y="14" data-gs-width="7" data-gs-height="6">' +
+    '      <div class="grid-stack-item-content"></div>' +
+    '    </div>' +
+    '    <div class="grid-stack-item" data-gs-x="7" data-gs-y="14" data-gs-width="5" data-gs-height="6">' +
+    '      <div class="grid-stack-item-content"></div>' +
+    '    </div>' +
+    '  </div>' +
+    '</div>';
+    var pos = [{x:0, y:0, w:12, h:9}, {x:0, y:9, w:12, h:5}, {x:0, y:14, w:7, h:6}, {x:7, y:14, w:5, h:6}];
+    beforeEach(function() {
+      document.body.insertAdjacentHTML('afterbegin', HTML);
+    });
+    afterEach(function() {
+      document.body.removeChild(document.getElementById('gs-cont'));
+    });
+    it('should have correct position', function() {
+      var items = $('.grid-stack-item');
+      for (var i = 0; i < items.length; i++) {
+        var item = $(items[i]);
+        expect(parseInt(item.attr('data-gs-x'))).toBe(pos[i].x);
+        expect(parseInt(item.attr('data-gs-y'))).toBe(pos[i].y);
+        expect(parseInt(item.attr('data-gs-width'))).toBe(pos[i].w);
+        expect(parseInt(item.attr('data-gs-height'))).toBe(pos[i].h);
+      }
+    });
+  });
 });

src/gridstack.js

@@ -801,11 +801,12 @@
       this.container.children('.' + this.opts.itemClass + ':not(.' + this.opts.placeholderClass + ')')
         .each(function(index, el) {
           el = $(el);
+          var x = parseInt(el.attr('data-gs-x'));
+          var y = parseInt(el.attr('data-gs-y'));
           elements.push({
             el: el,
-            // if x,y are missing (autoPosition) add them to end of list - keep their respective DOM order
-            i: (parseInt(el.attr('data-gs-x')) || 100) +
-              (parseInt(el.attr('data-gs-y')) || 100) * _this.opts.column
+            // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order
+            i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * _this.opts.column
           });
         });
       Utils.sortBy(elements, function(x) { return x.i; }).forEach(function(item) {