0

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?

emen
  • 6,050
  • 11
  • 57
  • 94

2 Answers2

2

There are at least two ways to store the data

  1. 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.

  2. 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.

Community
  • 1
  • 1
George Cummins
  • 28,485
  • 8
  • 71
  • 90
  • Thanks for the input. But the cookie will expire as soon as the timeout reaches, right? I mean, will it remember the cookie forever, that when the user re-login, it will use the last position? Using database perhaps – emen May 16 '13 at 17:03
  • 1
    @amnbhrm Cookies will expire, but can be set to a [Very Long Time™](http://stackoverflow.com/questions/3290424/set-a-cookie-to-never-expire#3290474). The database method would allow for permanent storage. – George Cummins May 16 '13 at 17:05
-1

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.

timstermatic
  • 1,710
  • 14
  • 32
  • 1
    Please consider updating your question to include the necessary code and/or ideas. Link-only answers are not useful: answers should be self-contained, using links only as reference. – George Cummins May 16 '13 at 16:45
  • There is a good deal of code on this post and it has many in-context user provided comments which is why I didn't post everything here. – timstermatic May 16 '13 at 16:46
  • I understand that the data at the end of the link may provide good context, but you should consider adding enough to your question to make it useful even if the link rots. This can simply be ideas to enable to user to craft a good Google query, or it can be a full-blown code example. – George Cummins May 16 '13 at 16:51
  • I've added an outline for what the linked code does. I appreciate the comment about link rot. I've kept that site running for 11 years and hopefully I can leave it to my kids should anything happen to me :) – timstermatic May 16 '13 at 16:58
  • I removed my downvote when I saw your edits. Good luck on keeping the dream alive! :) – George Cummins May 16 '13 at 17:00