Muuri: Saving the layout

Created on 9 Feb 2018 · 9Comments · Source: haltu/muuri

Hello,

I need to have an ability to save the layout order. As example: I have the data of each block size, now I make a reorder of all those blocks and now I need to save it in order to load all the blocks in the order I saved them. Which data should I save to load it in proper order?

Thanks.

question

Source

erikas-tranauskas

Most helpful comment

To save item positions give every item an id that match the id in your database, e.g.

<div class="item" data-id="1"></div>.

To serialize the order to an array of ids do:

var order = grid.getItems().map(item => item.getElement().getAttribute('data-id'))

Now you have an array of item ids in correct order, save it where you want in any format you want.
And now when you want to load the saved order do, you can do the following:

var grid = new Muuri('.grid', {
  layoutOnInit: false,
  sortData: {
    id: function (item, element) {
      return parseFloat(element.getAttribute('data-id'));
    }
  }
})
grid.sort('id');

ankushgarg1998 on 12 Feb 2018

👍3

All 9 comments

I'm pretty sure I've answered this a couple of times here. There should be an old issue or two somewhere in the archives.

niklasramo on 10 Feb 2018

To save item positions give every item an id that match the id in your database, e.g.

<div class="item" data-id="1"></div>.

To serialize the order to an array of ids do:

var order = grid.getItems().map(item => item.getElement().getAttribute('data-id'))

Now you have an array of item ids in correct order, save it where you want in any format you want.
And now when you want to load the saved order do, you can do the following:

var grid = new Muuri('.grid', {
  layoutOnInit: false,
  sortData: {
    id: function (item, element) {
      return parseFloat(element.getAttribute('data-id'));
    }
  }
})
grid.sort('id');

ankushgarg1998 on 12 Feb 2018

👍3

Thank you very much! :)

erikas-tranauskas on 12 Feb 2018

@ankushgarg1998 how about saving size as well?

vlodko on 20 Feb 2018

Original question seems to be resolved -> closing.

niklasramo on 29 Mar 2018

@ankushgarg1998 has given a good method to save item orders in an array.
Further question: The method is not good ennough when length of target list is large, >100 for example.
It's better to get current order of target item before dragging and new order after dragging operation.
Thus a item with data-id="abc"

<div class="item" data-id="abc"></div>

which moved from order 25 to 40 just return data-id, cur_order, new_order:

arr = [data-id, cur_order, new_order];
return arr;

So I can update order of items just between order 25-40 in database rather than all items's order each time.
Would it be posible to do that or there is already a method existed?