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

Console out put打印此

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

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

有解决方法吗？

Answer 1

for... in循环的迭代顺序通常无法保证。有关详细信息，请参阅this answer。

试试这个：

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

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