jQuery: save Portlets positions

I'm using jQuery UI to change the order.

In my application I need to add random number of statements one after the other, then reorder them (if I wish to) and then save to the server.

Adding statements as portlets is ok, but how would I save the positions?开发者_运维技巧

Thanks Macha

how about this one: Online Demo

Here is the source code for it...maybe its a good starting point for you.

Source with Author Comments

If by jQuery / Portlets you are indeed using http://host.sonspring.com/portlets/, then you can loop through at any point and determine what position each portlet content is in:

jQuery:

$('.portlet_content').each(function(i, v){
    //Get the ID of the first P tag of each portlet content container
    var portlet_content_id = $(this).find('p:first').attr('id');
    //Show content ID and position index in Firebug console
    console.log(portlet_content_id + ' is in Position ' + i); //content id is 1-based and postion is zero-based.
});

HTML (from the jQuery Portlets example, but I added IDs to the P tags - content_1, content_2 ...):

<table cellspacing="0" id="columns">
    <tr>
        <td>

            <div class="portlet">
                <div class="portlet_topper">
                    1. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>

            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    2. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    3. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
        </td>
        <td>
            <div class="portlet">
                <div class="portlet_topper">
                    4. <a href="#" class="toggle">Toggle</a>
                </div>

                <div class="portlet_content">
                    <p id="content_4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    5. <a href="#" class="toggle">Toggle</a>

                </div>
                <div class="portlet_content">
                    <p id="content_5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    6. <a href="#" class="toggle">Toggle</a>

                </div>
                <div class="portlet_content">
                    <p id="content_6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>
        </td>
        <td>
            <div class="portlet">

                <div class="portlet_topper">
                    7. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_7">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>
            </div>

            <div class="portlet">
                <div class="portlet_topper">
                    8. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_8">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>
                </div>

            </div>
            <div class="portlet">
                <div class="portlet_topper">
                    9. <a href="#" class="toggle">Toggle</a>
                </div>
                <div class="portlet_content">
                    <p id="content_9">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ut justo. Nulla libero.</p>

                </div>
            </div>
        </td>
    </tr>
</table><!-- /#columns -->