Hi,
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
Hi,
how about this one: Online Demo
Here is the source code for it...maybe its a good starting point for you.
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 -->