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

Question

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

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

Добавление утверждений в виде портлетов в порядке, но как бы сохранить позиции?

Благодаря Махова

Answer 1

Если по 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 example, но я добавил идентификаторы в теги 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 --> 

Answer 2

как об этом один: Online Demo

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

Source with Author Comments