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.

Yes of course you can. You'll need to ajax the data of where they all are when one is dropped (or wait a few seconds before posting in case they move many in a short period), save that against their user record, then just put them in the right place the next time. — Popnoodles, Feb 14 '13 at 23:06
Could you give an example? And would I save this in the database, tied in with their username, then retrieve it, or something else? Thanks — Beaurocks16, Feb 14 '13 at 23:07
An example is rather a lot to ask. You are going to get asked "what have you tried." I can give you the logic. Yes you'd retrieve it when they log in or view a page — Popnoodles, Feb 14 '13 at 23:07
@popnoodles I dont' know how to approach it, that is why I asked here. I haven't _tried_ anything, I don't know where to start. — Beaurocks16, Feb 14 '13 at 23:08

score 2 · Accepted Answer · answered Feb 14 '13 at 23:40

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.

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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.

Save position of draggable div jQuery

2 Answers2