In Action see the plugin at work

Basic Code Example how to implement

$("#element").sortable().rememberify();

About Rememberify what the plugin is, and how it works

Remeberify is an add-on plugin which is intended to improve the jQuery UI Sortable widget. It allows sortable elements to automatically save the last order set for their items, so that the customized item orders will be retained and used when the user returns to the site in the future.

Rememberify works by placing a cookie on the user's browser, which saves the last set order for the items within the sortable element. In order for Rememberify to work, you have to make sure that all of your sortable elements, and sortable items within those elements, have a unique id attribute value (or a different unique attribute value) - See example below, and also see the plugin API for more details.

Code Example Note that every sortable item, and the sortable element itself, all have a unique id

    <ul id="sortable_element">
        <li id="item1">This is sortable item 1</li>
        <li id="item2">This is sortable item 2</li>
        <li id="item3">This is sortable item 3</li>
    </ul>
    

API customize the plugin settings

attribute

Allows you to edit the attribute which is used to uniquely identify your sortable elements and the items within them. By default, this is set to id.

Code Example

$("#element").sortable().rememberify({attribute:"custom_id"});

path

Allows you to set the path for the rememberify cookie. If you want the order only to be saved and accessible on the current page, set this to the URL path corresponding to the page you want rememberify to be active. If you set this to "/", then the order will be saved and apply to all pages throughout your whole domain. By default, this is set to /.

Code Example

$("#element").sortable().rememberify({path:"/path/to/mypage.html"});

expires

Sets the expires time, in days, for the rememberify cookie. By default, this is set to 9999.

Code Example

$("#element").sortable().rememberify({expires:"2"});

putting it all together

You can customize multiple settings like this:

Code Example

$("#element").sortable().rememberify({attribute:"custom_id", path:"/path/to/mypage.html", expires:"2"});