jQuery : 포틀릿 위치 저장

Question

jQuery UI를 사용하여 순서를 변경하고 있습니다.

내 응용 프로그램에서 임의의 문을 차례로 추가 한 다음 원하는 순서로 재정렬 한 다음 서버에 저장해야합니다.

포틀릿으로 명령문을 추가하는 것은 괜찮지 만 포지션을 저장하는 방법은 무엇입니까?

감사 마차

Answer 1

만약 당신이 정말로 http://host.sonspring.com/portlets/ 사용하는jQuery를/포틀릿에 의해 다음 수 루프 임의의 지점에서 각 포틀릿 내용에 어떤 위치 결정을 통해 :

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 태그에 ID를 추가했습니다 (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