New item to the grid from input and save

[galarist]

Hi there,

I really like this library and I am trying to implement it in my project. I found this CodePen to use (https://codepen.io/niklasramo/pen/YveqNN) but first I try to understand how it works. I have tried to add input with a button to add a new item to the grid. I could add a new item to the local storage and the grid but it won't turn into draggable and it disappears from LS when I move another item. How can I make that possible?

Much appreciated for the help.

[galarist]

Here is the code example https://codepen.io/galarist/pen/oNZQVOe

The added item won't turn into draggable. Also when I move another item, the added item will disappear from localstorage. @niklasramo Can you please help me out?

[niklasramo]

The original example was not intended to use for scenarios where you would add items dynamically to the grid, but it's easy to customize it to support that scenario. The reason the new added item in your example is not turning into draggable is that you are not adding the item to the Muuri grid. You need to use the grid.add() method.

Here's a quick fork of your example which should work for your use case: https://codepen.io/niklasramo/pen/bGWpVae. I'll leave deleting an item from the grid properly as an exercise for the reader 😉

[galarist]

Awesome! Thank you so much!