我正在使用jQuery UI更改顺序。
在我的应用程序中，我需要一个接一个地添加随机数量的语句，然后重新排序它们（如果我愿意）然后保存到服务器。
将语句添加为portlet是可以的，但我如何保存位置？
由于 马查
答案 0 :(得分：2)
答案 1 :(得分：1)
如果通过 jQuery / Portlets 确实使用http://host.sonspring.com/portlets/，那么您可以在任何时候循环并确定每个portlet内容的位置：
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 Portlets 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 -->