Muuri: Save/Load item positions

[woldsnewmedia]

Hi,

Is it possible to save/load item positions via a JSON string or similar?

E.g for a dashboard of draggable icons/tiles, so upon reloading the page, the positions that the icons/tiles were last dragged to ?

Craig

[niklasramo]

You can use the .sort() method to sort the items any way you want. Also on init. You just need to do the serialization part yourself.

[woldsnewmedia]

Hi,

What, so I need to use .sort to achieve the Save and Load of item positions?

IS there any example code out there or has anyone else achieved saving and loading the item positions (for example as a JSON string to a database)?

What events do I need to use to write the updated positions to the database using an AJAX call for example?

Craig.

[niklasramo]

1. 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>.
2. To serialize the order to an array of ids do:
   var order = grid.getItems().map(item => item.getElement().getAttribute('data-id'))
3. Now you have an array of item ids in correct order, save it where you want in any format you want.
4. 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');

[woldsnewmedia]

Hi,

Thanks for that reply.

1) So would I be able to, for the saving part, be able to use some event that does an AJAX save of the layout each time an item is dragged and dropped (i.e. I want to saving to be realtime, not via use of for example a "Save Layout" button)

2) By sorting, this then won't upset the layout (e.g. if I had four rows such as A, B, C, D and I dragged them around to be A,D,C,B and they had saved each position change, on reload they would still be A,D,C,B [if that makes sense[)?

Craig.

[woldsnewmedia]

Hi again,

Just as a follow-on to my last question, what event is fired when the user lets go of the mouse button so that I can see if I can trigger AJAX position save then?

Craig

Hi,

Thanks for that reply.

So would I be able to, for the saving part, be able to use some event that does an AJAX save of the layout each time an item is dragged and dropped (i.e. I want to saving to be realtime, not via use of for example a "Save Layout" button)

By sorting, this then won't upset the layout (e.g. if I had four rows such as A, B, C, D and I dragged them around to be A,D,C,B and they had saved each position change, on reload they would still be A,D,C,B [if that makes sense[)?

Craig.

[niklasramo]

I suggest you take a look at the docs: https://github.com/haltu/muuri#grid-events. There are detailed explanations of all the events. You are probably looking for move event and/or receive, beforeReceive, send, beforeSend.

[woldsnewmedia]

Hi,

Thanks I will.

I am trying to get working my own version based on your sample and the dragging is not working and I can't seem to work out why - everything else looks ok?

Sample code at:-

http://wnmdev.co.uk/m1.htm

Craig.

[woldsnewmedia]

Hi,

It appears to be working now.

Craig.

[asithub]

In angular application how to use sortData as this is not working for kanban demo

layoutOnInit: false,

  sortData: {
    id: (item, element) => {
      return parseFloat(element.getAttribute('data-id'));
    }
  },

>

[asithub]

1. 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>.
2. To serialize the order to an array of ids do:
   var order = grid.getItems().map(item => item.getElement().getAttribute('data-id'))
3. Now you have an array of item ids in correct order, save it where you want in any format you want.
4. 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');

How to manage the above in Angular application with kanban-demo?