jQuery: сохранить позиции портлетов

Question

Я использую jQuery UI для изменения порядка.

В моем приложении мне нужно добавить случайное число операторов один за другим, затем изменить их порядок (если я хочу) и затем сохранить на сервере.

Добавление операторов в виде портлетов - это нормально, но как мне сохранить позиции?

Спасибо Махова

Answer 1

как насчет этого: Онлайн демо

Вот исходный код для него ... может быть, это хорошая отправная точка для вас.

Источник с комментариями автора

Answer 2

Если с помощью jQuery / Portlets вы действительно используете http://host.sonspring.com/portlets/,, то вы можете перейти в любой точке и определить, в каком положении находится каждый контент портлета:

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 (из портлетов jQuery , пример , но я добавил идентификаторы в теги P - 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 -->