0

I am trying to store the order of the boxes as they appear on the page using gridstack.js

Currently they order as they appear in HTML, and not how they are laid out on the page. Here is a picture to explain further what I am trying to do:

enter image description here

The code I am using to set their order:

$gridStack.on('change', gridStackItemOnChange);  


function gridStackItemOnChange(e, items)
{
    var index = 0;

    for(i in items) {
        var el = $(items[i].el);
        el.data('index', index);

        console.log('view:', el.data('view'), ' index:', index);

        index++;
    }
}

Console out put prints this

view: about_me  index: 0
view: blank  index: 1
view: youtube  index: 2
view: comments  index: 3

It seems like it just gets any random order, and not from left to right

Is there a way around this?

Ben
  • 5,627
  • 9
  • 35
  • 49

1 Answers1

1

Iteration order of for... in loops is generally not guaranteed. See this answer for more information.

Try this:

items.forEach(function(e, i) {
    var el = $(e.el);
    el.data('index', i);

    console.log('view:', el.data('view'), ' index:', i);
})
Community
  • 1
  • 1
Mitch Lillie
  • 2,217
  • 18
  • 25
  • Thanks for the reply but I think I've fixed it, basically in my query I have ordered by the 'x' and 'y' fields instead – Ben Apr 12 '17 at 00:29