如何获取可排序的portlet位置并在移动时更新它？

Question

我目前正在使用jQuery UI可排序的portlet和PHP，我需要能够获取每个portlet所在的数字位置并在移动时更新它。

第一个位置的portlet应该总是说Position 1，而第二个位置的portlet应该总是说Position 2。

技巧是我希望每次移动portlet时都更新它，以便第一个位置的portlet总是Position 1，依此类推。这是因为我在这些portlet中移动唯一数据，而Position值将确定此信息在另一个页面上显示的优先级。

那么如何在每个portlet上获取并显示portlet位置，并在移动时更新它？

<script>
$(function() {
$( ".column" ).sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"    
});
$( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
});
</script>

<?php
for($i = 0; $i < 6; $i++){
?> 
<div class="portlet" id='portlet<?php echo $i; ?>'>

    <div class="portlet-header">
        <div>Position:<span id="value<?php echo $i; ?>"></span></div>
        <script>
             $(document).ready(function() {
                  var portletPosition = $('#portlet<?php echo $i; ?>').sortable("serialize");
                  $("#value<?php echo $i; ?>").html(portletPosition);
             });
        </script>
    </div>

//Unique Portlet data

</div>
<?php
}
?>