Save position of draggable div jQuery

Question

I have a website, and I am making widgets for it. Those widgets are draggable. I was wondering how I would save the positions of the widget (And if it is hidden or not [disabled or enabled]), and load the positions and if it is hidden or not when you join the website again (With the same user). Thank you for your time, please post comments if you don't understand what I need.

Answer 1

I am assuming that your widgets are in a <ul> , one <li> per widget which is quite normal.

Be able to position them
You need to arrange the widgets in a specific order in the first place. Imagine you already did the hard work and have the data that a user would have. Hard-code that and get your modules to appear correctly. Change the data, see if the modules appear as you expect.
The user needs to drag them. jQuery draggable is your friend.

Prove you can get your data
Be able to get the order of widgets from the page after they've moved. draggable example shows a .serialize() function.
Also you need to know which is on and which is off. You can create another list using jQuery .map() which can return their ID and state if you ask it nicely.
Alert to the screen, write to the document, or preferably use console.log() .

Interact with the server
You can skip this if you want to test using just cookies because the browser can set those.
But if you want to store this with the user's info in case they log out, start a new session or use another computer you'll need to use a database.
You need to know about sending data from browser to the server using ajax. jQuery is your friend.
You need to learn about storing user info in the database.

Restore the positions
You want to be able to set the positions of the widgets from a list that isn't hard-coded, so be able to order the widgets correctly on page load using the data that you saved. You did this in the first step but with hard-coded data.

Answer 2

What you will have to do is:
Save the status at a given time. For example when you change it.

$('#toBeDragableId').draggable({
   // options...
   drag: funciton(event,ui){
      theUserposition = ui.position;
   }
});

You need to save theUserposition in a consistent way, like a database or using cookies or client side storage. Afterwards, you need to recove it and set it when you load the page.

Similar Question
Example using Cookies