javascript - GridStack JS设置网格框的顺序

Question

我正在尝试使用 gridstack.js 存储框的顺序，因为它们出现在页面上

目前，它们按照它们在 HTML 中出现的顺序排列，而不是它们在页面上的布局方式。这是一张图片来进一步解释我正在尝试做的事情：

我用来设置顺序的代码：

$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++;
    }
}

控制台输出打印这个

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

似乎它只是得到任何随机顺序，而不是从左到右

有没有解决的办法？

Answer 1

for... in通常不保证循环的迭代顺序。有关更多信息，请参阅此答案。

尝试这个：

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

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