Storing position of sortable box in CSS3? - php

Question

How do I store the position of box in a sortable row fluid? For example, every time a user drag a box from category 1 to category 2 then when he refreshes the page, it will remember the position?
Here's the HTML code for the interface you might wanna look at:
<div class="row-fluid sortable">
<div class="box span3">
<div class="box-header well">
<h2>Category1</h2>
</div>
</div>
<div class="box span3">
<div class="box-header well">
<h2>Category2</h2>
</div>
</div>
</div>
As you can see, it uses a class in CSS file for the style. Or Is there any better way to do this by using jQuery?

Answer 1

There are at least two ways to store the data
Use a client-side cookie to store the data. You can use a plugin like jquery-cookie to read and write cookies on the client side.
Store the data on the server side. This will require an AJAX call to a backend script to store the data. You can then query the database for the stored positions on each new page load, or create a new AJAX call to retrieve the data as needed.

Answer 2

You will need some kind of persistent storage as George points out, you could do this with cookies or a database.
Below is a link to an example that uses jquery to serialize the order once dragging has finished and then passes the result on to a server side script via ajax. The server side script then updates the database and gives you a means to persist the order.
I stress that this example is one of my own from several years back. It's a site I no longer maintain, but this post has a good number of comments that highlight some issues that may arise.
The example uses a list rather than divs. It also uses a database for persistent storage, but you could alter the server side script to save cookies.
http://www.wiseguysonly.com/2008/12/07/drag-and-drop-reordering-of-database-fields-sortables-with-jquery/
It should be simple enough to adapt to your exact needs.