CODEWITHSUNDEEP
javascriptjquerygridstack
Ben
Ben

Reputation: 5777

GridStack JS set order of grid boxes

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?

Upvotes: 0

Views: 1110

Answers (1)

Mitch Lillie
Mitch Lillie

Reputation: 2407

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);
})

Upvotes: 1

Related Questions