I am trying to create a dashboard where users can drag and drop widgets within the dashboard to any position they'd like. I've seen other examples similar but they all seem to have predefined elements. In my case, the user can create and remove elements on the dashboard and move them to any point on the board. My question is, what would be the best way to create a dashboard like this that supports the dragging and dropping of an element anywhere on it. Also, how can I save this info?
Thanks in advance.
Are you looking for something like react-grid-layout? In this demo you can see how the widgets' state could be encoded. This could be saved and retrieved upon page load.
You can use react-dnd library. Easy to implement and customise. Here is the repo link;